'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 LeadScoreModal from '@/components/modals/lead_score/LeadScoreModal';

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

type LeadScore = {
  id: number;
  scoreName: string;
  score: number;
  description: string;
  status: boolean;
};

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

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingScore, setEditingScore] = useState<LeadScore | null>(null);
  const [deleteScore, setDeleteScore] = useState<LeadScore | null>(null);

  const [leadScores, setLeadScores] = useState<LeadScore[]>([
    { id: 1, scoreName: 'Hot Lead', score: 90, description: 'High intent user', status: true },
    { id: 2, scoreName: 'Warm Lead', score: 60, description: 'Medium interest', status: true },
    { id: 3, scoreName: 'Cold Lead', score: 20, description: 'Low engagement', status: false },
    { id: 4, scoreName: 'New Lead', score: 10, description: 'Just entered system', status: true },
  ]);

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

    setEditingScore(null);
    setOpenModal(false);
  };

  const handleDelete = () => {
    setLeadScores((prev) =>
      prev.filter((item) => item.id !== deleteScore?.id)
    );
    setDeleteScore(null);
  };

  const columns: Column<LeadScore>[] = [
    {
      header: 'Score Name',
      accessor: 'scoreName',
    },
    {
      header: 'Score',
      accessor: 'score',
    },
    {
      header: 'Description',
      accessor: 'description',
    },
    {
      header: 'Status',
      accessor: 'status',
      render: (_, row) => (
        <div className="flex items-center gap-3">
          <Switch
            checked={row.status}
            onChange={() => {
              setLeadScores((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={() => {
              setEditingScore(row);
              setOpenModal(true);
            }}
          >
            <PiPencilSimpleLineBold />
          </button>

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

  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="lead_score"
        header="Module,Add,Edit,Delete,View"
        showExport={false}
        showImport={false}
      >
        <div className="space-y-6">
          <div className="flex justify-end">
            <PrimaryButton
              onClick={() => {
                setEditingScore(null);
                setOpenModal(true);
              }}
            >
              <PiPlusBold className="h-4 w-4" />
              Create Lead Score
            </PrimaryButton>
          </div>

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

      <LeadScoreModal
        open={openModal}
        onClose={() => {
          setOpenModal(false);
          setEditingScore(null);
        }}
        onSubmit={handleSubmit}
        initialData={editingScore}
      />

      <ConfirmModal
        open={!!deleteScore}
        onClose={() => setDeleteScore(null)}
        onConfirm={handleDelete}
        title="Delete Lead Score"
        description={`Are you sure you want to delete "${deleteScore?.scoreName}"?`}
      />
    </>
  );
}