'use client';

import { useState } from 'react';
import { routes } from '@/config/routes';
import { Switch } from 'rizzui';
import TableLayout from '../../../table-layout';
import { PiPencilSimpleLineBold, PiTrashBold } from 'react-icons/pi';
import PrimaryButton from '../../../../components/common/primary-button';
import { PiPlusBold } from 'react-icons/pi';
import ConfirmModal from '@/components/common/confirm-modal';
import DataTable from '@/components/common/DataTable';
import LeadSourceModal from '@/components/modals/lead_source/LeadSourceModal';


type Column<T> = {
  header: string;
  accessor: keyof T;
  render?: (value: any, row: T) => React.ReactNode;
};


type LeadSource = {
  id: number;
  name: string;
  description: string;
  status: boolean;
};

const pageHeader = {
  title: 'Lead Source',
  breadcrumb: [
    { href: routes.dashboard, name: 'Home' },
    { name: 'Settings' },
  ],
};

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingSource, setEditingSource] = useState<LeadSource | null>(null);
  const [deleteRole, setDeleteRole] = useState<LeadSource | null>(null);

    const handleSubmit = (data: LeadSource) => {
      if (editingSource) {
        setLeadSources((prev) =>
          prev.map((item) =>
            item.id === editingSource.id ? { ...item, ...data } : item
          )
        );
      } else {
        setLeadSources((prev) => [
          ...prev,
          { ...data, id: Date.now(), status: true },
        ]);
      }

      setEditingSource(null);
    };

    const handleDelete = () => {
      setLeadSources((prev) =>
        prev.filter((item) => item.id !== deleteRole?.id)
      );
      setDeleteRole(null);
    };

    const [leadSources, setLeadSources] = useState<LeadSource[]>([
      { id: 1, name: 'Google Ads', description: 'Paid search traffic', status: true },
      { id: 2, name: 'Facebook', description: 'Social media leads', status: false },
      { id: 3, name: 'Referral', description: 'Customer referrals', status: true },
      { id: 4, name: 'Website', description: 'Organic website leads', status: true },
    ]);

    const columns: Column<LeadSource>[] = [
      {
        header: 'Name',
        accessor: 'name',
      },
      {
        header: 'Description',
        accessor: 'description',
      },
      {
        header: 'Status',
        accessor: 'status',
        render: (_, row) => (
          <div className="flex items-center gap-3">
            <Switch
              checked={row.status}
              onChange={() => {
                setLeadSources((prev) =>
                  prev.map((item) =>
                    item.id === row.id
                      ? { ...item, status: !item.status }
                      : item
                  )
                );
              }}
            />
            <span
              className={`text-xs font-medium ${
                row.status ? 'text-green-600' : 'text-red-500'
              }`}
            >
              {row.status ? 'Active' : 'Inactive'}
            </span>
          </div>
        ),
      },
      {
        header: 'Actions',
        accessor: 'id',
        render: (_, row) => (
          <div className="flex gap-2">
            <button
              onClick={() => {
                setEditingSource(row);
                setOpenModal(true);
              }}
            >
              <PiPencilSimpleLineBold />
            </button>

            <button
              onClick={() => setDeleteRole(row)}
              className="text-red-600"
            >
              <PiTrashBold />
            </button>
          </div>
        ),
      },
    ];


  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="roles_permissions"
        header="Module,Add,Edit,Delete,View"
        showExport={false}
        showImport={false}
      >
        <div className="space-y-6">
          <div className="flex items-start justify-end">
            <PrimaryButton onClick={() => {
              setEditingSource(null);
              setOpenModal(true);
            }}>
              <PiPlusBold className="h-4 w-4" />
              Create Lead Source
            </PrimaryButton>
          </div>
          <div className="rounded-lg border bg-white shadow-sm">
            <DataTable
              data={leadSources}
              columns={columns}
              searchAble
              pagination
            />
          </div>
        </div>
      </TableLayout>

        <LeadSourceModal
          open={openModal}
          onClose={() => {
            setOpenModal(false);
            setEditingSource(null);
          }}
          onSubmit={handleSubmit}
          initialData={editingSource}
        />

        <ConfirmModal
          open={!!deleteRole}
          onClose={() => setDeleteRole(null)}
          onConfirm={handleDelete}
          title="Delete Lead Source"
          description={`Are you sure you want to delete this lead source "${deleteRole?.name}"?`}
        />
    </>
  );
}