'use client';

import { useState } from 'react';
import { routes } from '@/config/routes';
import { useDrawer } from '@/components/common/Drawer';
import TableLayout from '../../table-layout';
import {
  PiEye,
  PiPencilSimpleLineBold,
  PiTrashBold,
  PiPlusBold,
  PiMapPin,
} 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 PropertyDrawer from '@/components/drawer/manage_property/PropertyDrawer';

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

type Property = {
  id: number;
  name: string;
  location: string;
  type: string;
  sqft: number;
  budget: number;
};

const pageHeader = {
  title: 'Manage Property',
  breadcrumb: [
    { href: routes.dashboard, name: 'Home' },
    { name: 'Property Management' },
  ],
};

export default function Page() {
  const { openDrawer } = useDrawer();

  const [deleteItem, setDeleteItem] = useState<any>(null);

  const [properties, setProperties] = useState<Property[]>([
    {
      id: 1,
      name: 'Green City Plot',
      location: 'Madurai',
      type: 'Plot',
      sqft: 1200,
      budget: 1500000,
    },
    {
      id: 2,
      name: 'Lake View Villa',
      location: 'Chennai',
      type: 'House',
      sqft: 2400,
      budget: 7500000,
    },
  ]);

  const handleEdit = (updated: Property) => {
    setProperties((prev) =>
      prev.map((p) => (p.id === updated.id ? updated : p))
    );
  };

  const handleDelete = () => {
    setProperties((prev) =>
      prev.filter((p) => p.id !== deleteItem.id)
    );
    setDeleteItem(null);
  };

  const columns: Column<Property>[] = [
    {
      header: 'Property Name',
      accessor: 'name',
      render: (_, row) => (
        <span className="text-blak font-semibold">{row.name}</span>
      ),
    },
    {
      header: 'Location',
      accessor: 'location',
      render: (_, row) => (
        <div className="flex items-center justiy-start gap-2">
          <PiMapPin/>
          <span className="text-blak font-semibold">{row.location}</span>
        </div>
      ),
    },
    {
      header: 'Type',
      accessor: 'type',
    },
    {
      header: 'Sq Ft',
      accessor: 'sqft',
    },
    {
      header: 'Budget',
      accessor: 'budget',
      render: (value) => `₹ ${value.toLocaleString()}`,
    },
    {
      header: 'Actions',
      accessor: 'id',
      render: (_, row) => (
        <div className="flex justify-center gap-2">
          <button onClick={() => console.log('View', row)}>
            <PiEye />
          </button>

          <button
            onClick={() => {
              openDrawer({
                view: (
                  <PropertyDrawer
                    initialData={row}
                    onSubmit={(data: any) => handleEdit(data)}
                  />
                ),
              });
            }}
          >
            <PiPencilSimpleLineBold />
          </button>

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

  return (
    <>
      <TableLayout
        title={pageHeader.title}
        breadcrumb={pageHeader.breadcrumb}
        data={[]}
        fileName="properties"
        header="Module,Add,Edit,Delete,View"
        showExport={false}
        showImport={false}
        actions={
          <PrimaryButton
            onClick={() => {
              openDrawer({
                view: (
                  <PropertyDrawer
                    onSubmit={(data: any) => {
                      setProperties((prev) => [
                        ...prev,
                        { ...data, id: Date.now() },
                      ]);
                    }}
                  />
                ),
              });
            }}
          >
            <PiPlusBold className="h-4 w-4" />
            Create Property
          </PrimaryButton>
        }
      >
        <div className="rounded-lg border bg-white shadow-sm">
          <DataTable
            data={properties}
            columns={columns}
            searchAble
            pagination
          />
        </div>
      </TableLayout>

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