"use client";

import React from "react";
import { Table, Button, Space, Popconfirm, Tooltip, Avatar, Tag } from "antd";
import type { ColumnsType } from "antd/es/table";
import { Assistant } from "@/types/assistant";
import { Trash, Eye, User } from "iconsax-react";
import Link from "next/link";

interface SelectionConfig {
  setSelectedItems: (items: Assistant[]) => void;
  initialSelecteds: Assistant[];
}

interface AssistantsProps {
  data: Assistant[];
  loading: boolean;
  page: number;
  total: number;
  setPage: (page: number) => void;
  selectionConfig?: SelectionConfig | null;
  onDelete?: (id: number) => void;
  isDeleting?: boolean;
}

// این کامپوننت باید اکسپورت شود تا در فایل پیج استفاده شود
export const Assistants = ({
  data,
  loading,
  page,
  total,
  setPage,
  selectionConfig,
  onDelete,
  isDeleting,
}: AssistantsProps) => {

  const columns: ColumnsType<Assistant> = [
    {
      title: "شناسه",
      dataIndex: "id",
      key: "id",
      width: 60,
      align: "center",
    },
    {
      title: "تصویر",
      dataIndex: "image",
      key: "image",
      width: 70,
      align: "center",
      render: (img) => (
        <Avatar 
           shape="square" 
           src={img ? `${process.env.NEXT_PUBLIC_API_BASE_URL}${img}` : undefined} 
           icon={<User size="20"/>} 
        />
      )
    },
    {
      title: "نام دستیار",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "دسته‌بندی",
      dataIndex: ["category", "name"],
      key: "category",
      render: (text) => (
        text ? <Tag color="cyan">{text}</Tag> : <span className="text-gray-400">---</span>
      ),
    },
    {
      title: "سازنده",
      dataIndex: ["user", "username"],
      key: "creator",
      render: (text) => text || "---",
    },
    {
      title: "وضعیت",
      dataIndex: "status",
      key: "status",
      render: (status) => {
        const color = status === "confirmed" ? "green" : status === "rejected" ? "red" : "gold";
        return <Tag color={color}>{status}</Tag>;
      }
    },
    {
      title: "تاریخ",
      dataIndex: "created_at",
      key: "created_at",
      render: (date) => new Date(date).toLocaleDateString("fa-IR"),
    },
    {
      title: "عملیات",
      key: "action",
      width: 120,
      render: (_, record) => (
        <Space>
          <Link href={`/assistant/${record.id}`}>
            <Tooltip title="مشاهده">
               <Button icon={<Eye size="18" />} size="small" />
            </Tooltip>
          </Link>

          {onDelete && (
            <Popconfirm
              title="حذف دستیار"
              description="آیا از حذف این دستیار مطمئن هستید؟"
              onConfirm={() => onDelete(record.id)}
              okText="بله"
              cancelText="خیر"
              okButtonProps={{ danger: true, loading: isDeleting }}
            >
              <Tooltip title="حذف">
                <Button 
                  type="primary" 
                  danger         
                  icon={<Trash size="16" color="#fff"/>}
                  size="small"
                />
              </Tooltip>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  return (
    <Table
      rowKey="id"
      columns={columns}
      dataSource={data}
      loading={loading}
      pagination={{
        current: page,
        total: total,
        onChange: setPage,
        pageSize: 20, 
        showSizeChanger: false
      }}
      rowSelection={
        selectionConfig
          ? {
              selectedRowKeys: selectionConfig.initialSelecteds?.map((i) => i.id),
              onChange: (_: React.Key[], selectedRows: Assistant[]) => {
                selectionConfig.setSelectedItems(selectedRows);
              },
            }
          : undefined
      }
      scroll={{ x: 900 }}
    />
  );
};