'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 FollowupStatusModal from '@/components/modals/followup_status/FollowupStatusModal';

type FollowupStatus = {
  id: number;
  name: string;
  description: string;
  textColor: string;
  bgColor: string;
  active: boolean;
};

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

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

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingSource, setEditingSource] = useState<FollowupStatus | null>(null);
  const [deleteItem, setDeleteItem] = useState<FollowupStatus | null>(null);

   const [followupStatuses, setFollowupStatuses] = useState<FollowupStatus[]>([
    {
      id: 1,
      name: 'scheduled',
      description: 'Scheduled followup',
      textColor: '#1D4ED8',
      bgColor: '#DBEAFE',
      active: true,
    },
    {
      id: 2,
      name: 'overdue',
      description: 'Overdue followup',
      textColor: '#DC2626',
      bgColor: '#FEE2E2',
      active: true,
    },
    {
      id: 3,
      name: 'completed',
      description: 'Completed followup',
      textColor: '#16A34A',
      bgColor: '#DCFCE7',
      active: true,
    },
  ]);

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

    setEditingSource(null);
    setOpenModal(false);
  };

  const handleDelete = () => {
    setFollowupStatuses((prev) =>
      prev.filter((item) => item.id !== deleteItem?.id)
    );
    setDeleteItem(null);
  };

  const columns: Column<FollowupStatus>[] = [
    {
      header: 'Followup Status',
      accessor: 'name',
      render: (_, row) => (
        <span
          className="px-3 py-1 rounded-full text-xs font-semibold inline-block"
          style={{
            color: row.textColor,
            backgroundColor: row.bgColor,
          }}
        >
          {row.name}
        </span>
      ),
    },
    {
      header: 'Description',
      accessor: 'description',
    },
    {
      header: 'Active',
      accessor: 'active',
      render: (_, row) => (
        <div className="flex items-center gap-3">
          <Switch
            checked={row.active}
            onChange={() => {
              setFollowupStatuses((prev) =>
                prev.map((item) =>
                  item.id === row.id
                    ? { ...item, active: !item.active }
                    : item
                )
              );
            }}
          />
          <span
            className={`text-xs font-medium ${
              row.active ? 'text-green-600' : 'text-red-500'
            }`}
          >
            {row.active ? '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={() => setDeleteItem(row)}
            className="text-red-600"
          >
            <PiTrashBold />
          </button>
        </div>
      ),
    },
  ];

  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="followup_status"
        header="Followup Status"
        showExport={false}
        showImport={false}
      >
        <div className="space-y-6">
          <div className="flex justify-end">
            <PrimaryButton
              onClick={() => {
                setEditingSource(null);
                setOpenModal(true);
              }}
            >
              <PiPlusBold className="h-4 w-4" />
              Create Followup Status
            </PrimaryButton>
          </div>

          <div className="rounded-lg border bg-white shadow-sm">
            <DataTable
              data={followupStatuses}
              columns={columns}
              searchAble
              pagination
            />
          </div>
        </div>
      </TableLayout>

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

      <ConfirmModal
        open={!!deleteItem}
        onClose={() => setDeleteItem(null)}
        onConfirm={handleDelete}
        title="Delete Followup Status"
        description={`Are you sure you want to delete "${deleteItem?.name}"?`}
      />
    </>
  );
}