'use client';

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

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

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

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

export default function Page() {
  const [openModal, setOpenModal] = useState(false);
  const [editingTag, setEditingTag] = useState<Tag | null>(null);
  const [deleteTag, setDeleteTag] = useState<Tag | null>(null);

  const [tags, setTags] = useState<Tag[]>([
    {
      id: 1,
      name: 'Hot Property Lead',
      description: 'High intent buyer looking for immediate purchase',
      status: true,
    },
    {
      id: 2,
      name: 'Construction Inquiry',
      description: 'Client interested in ongoing or upcoming construction projects',
      status: true,
    },
    {
      id: 3,
      name: 'Site Visit Scheduled',
      description: 'Lead has confirmed a site visit for property viewing',
      status: true,
    },
    {
      id: 4,
      name: 'Budget Constraint',
      description: 'Lead interested but limited by budget range',
      status: false,
    },
    {
      id: 5,
      name: 'Ready to Purchase',
      description: 'Client is ready for final negotiation and booking',
      status: true,
    },
    {
      id: 6,
      name: 'Investment Lead',
      description: 'Looking for property investment opportunities (resale/rental)',
      status: true,
    },
  ]);

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

    setEditingTag(null);
    setOpenModal(false);
  };

  const handleDelete = () => {
    setTags((prev) => prev.filter((item) => item.id !== deleteTag?.id));
    setDeleteTag(null);
  };

  const columns: Column<Tag>[] = [
    {
      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={() => {
              setTags((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={() => {
              setEditingTag(row);
              setOpenModal(true);
            }}
          >
            <PiPencilSimpleLineBold />
          </button>

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

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

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

      <TagModal
        open={openModal}
        onClose={() => {
          setOpenModal(false);
          setEditingTag(null);
        }}
        onSubmit={handleSubmit}
        initialData={editingTag}
      />

      <ConfirmModal
        open={!!deleteTag}
        onClose={() => setDeleteTag(null)}
        onConfirm={handleDelete}
        title="Delete Tag"
        description={`Are you sure you want to delete this tag "${deleteTag?.name}"?`}
      />
    </>
  );
}