'use client';

import { useEffect, useRef, useState } from 'react';
import type { PaginationState } from '@tanstack/react-table';
import { useRouter } from 'next/navigation';
import { api } from '@/lib/api';
import { useAuth } from '@/components/auth-context';
import { toast } from 'react-toastify';
import { showConfirmDelete } from '@/lib/confirm';
import { DataTable } from '@/components/data-table/DataTable';
import { DataTableActions } from '@/components/data-table/DataTableActions';
import dynamic from 'next/dynamic';
import BackToDashboard from '@/components/BackToDashboard';
import { PageLoader } from '@/components/DotLoader';

const RichTextEditor = dynamic(() => import('@/components/RichTextEditor'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-[300px] rounded-none border border-slate-200 dark:border-slate-800 bg-slate-50 dark:bg-slate-950 animate-pulse" />
  ),
});

interface Client {
  id: number;
  name: string;
  email?: string;
  phone?: string;
  website?: string;
  description?: string;
  created_at: string;
  updated_at: string;
}

export default function ClientsPage() {
  const router = useRouter();
  const { user } = useAuth();
  const [clients, setClients] = useState<Client[]>([]);
  const [loading, setLoading] = useState(true);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [viewMode, setViewMode] = useState<'card' | 'table'>('table');
  const [search, setSearch] = useState('');
  const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 20 });
  const [total, setTotal] = useState(0);

  const columns = [
    {
      id: 'srNo',
      header: 'S.No.',
      cell: ({ row, table }: any) => {
        const pageIndex = table.getState().pagination.pageIndex;
        const pageSize = table.getState().pagination.pageSize;
        return <span className="font-semibold text-slate-500 dark:text-slate-400">{pageIndex * pageSize + row.index + 1}</span>;
      },
    },
    {
      accessorKey: 'name',
      header: 'Company / Client Name',
      cell: ({ row }: any) => {
        const client = row.original;
        return (
          <span className="text-sm font-bold text-slate-850 dark:text-white flex items-center gap-1.5">
            <i className="fa-solid fa-building text-slate-400 dark:text-slate-500 text-base"></i> {client.name}
          </span>
        );
      },
    },
    {
      accessorKey: 'website',
      header: 'Website',
      cell: ({ row }: any) => {
        const client = row.original;
        return client.website ? (
          <a
            href={client.website}
            target="_blank"
            rel="noopener noreferrer"
            className="text-xs font-bold text-indigo-650 dark:text-indigo-400 hover:underline"
            onClick={(e) => e.stopPropagation()}
          >
            {client.website}
          </a>
        ) : (
          <span className="text-slate-400">—</span>
        );
      },
    },
    {
      accessorKey: 'email',
      header: 'Contact Email',
      cell: ({ row }: any) => {
        const client = row.original;
        return client.email ? (
          <span className="text-slate-650 dark:text-slate-400 font-semibold">{client.email}</span>
        ) : (
          <span className="text-slate-400">—</span>
        );
      },
    },
    {
      accessorKey: 'phone',
      header: 'Contact Phone',
      cell: ({ row }: any) => {
        const client = row.original;
        return client.phone ? (
          <span className="text-slate-650 dark:text-slate-400 font-semibold">{client.phone}</span>
        ) : (
          <span className="text-slate-400">—</span>
        );
      },
    },
    {
      accessorKey: 'description',
      header: 'Description',
      cell: ({ row }: any) => {
        const client = row.original;
        const plainText = client.description ? client.description.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim() : '';
        return client.description ? (
          <p className="max-w-xs truncate text-slate-500 dark:text-slate-400 font-semibold" title={plainText}>
            {plainText}
          </p>
        ) : (
          <span className="text-slate-400">—</span>
        );
      },
    },
    {
      id: 'actions',
      header: () => <div className="text-right">Actions</div>,
      cell: ({ row }: any) => {
        const client = row.original;
        return (
          <DataTableActions
            onEdit={hasChangePermission ? () => openEditModal(client) : undefined}
            onDelete={hasDeletePermission ? () => handleDelete(client.id) : undefined}
          />
        );
      },
    },
  ];

  // Form fields
  const [editingClientId, setEditingClientId] = useState<number | null>(null);
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [website, setWebsite] = useState('');
  const [description, setDescription] = useState('');
  const [submitting, setSubmitting] = useState(false);

  const isAdmin = user?.role === 'ADMIN';
  const hasAddPermission = isAdmin || user?.permissions?.includes('clients.add_client') || false;
  const hasChangePermission = isAdmin || user?.permissions?.includes('clients.change_client') || false;
  const hasDeletePermission = isAdmin || user?.permissions?.includes('clients.delete_client') || false;

  const loadAll = async () => {
    if (!user) return;
    setLoading(true);
    try {
      const hasViewPermission = user.role === 'ADMIN' || user.permissions?.includes('clients.view_client');
      if (hasViewPermission) {
        try {
          const params = new URLSearchParams();
          params.set('page', String(pagination.pageIndex + 1));
          params.set('page_size', String(pagination.pageSize));
          if (search.trim()) params.set('search', search.trim());
          const clientsRes = await api.get(`/clients/?${params.toString()}`) as any;
          const d = clientsRes.data;
          if (d && Array.isArray(d.results)) {
            setClients(d.results);
            setTotal(d.count ?? d.results.length);
          } else if (Array.isArray(d)) {
            setClients(d);
            setTotal(d.length);
          } else {
            setClients([]);
            setTotal(0);
          }
        } catch (err) {
          console.error("Failed to load clients:", err);
          setClients([]);
          setTotal(0);
        }
      }
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (!user) return;
    loadAll();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user]);

  // Reset to page 1 when the search changes.
  useEffect(() => {
    setPagination((p) => (p.pageIndex === 0 ? p : { ...p, pageIndex: 0 }));
  }, [search]);

  // Refetch on search/pagination change (the initial load is handled above).
  const didInitialClientLoad = useRef(false);
  useEffect(() => {
    if (!user) return;
    if (!didInitialClientLoad.current) { didInitialClientLoad.current = true; return; }
    const t = setTimeout(() => { loadAll(); }, 300);
    return () => clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [user, search, pagination]);

  const openCreateModal = () => {
    setEditingClientId(null);
    setName('');
    setEmail('');
    setPhone('');
    setWebsite('');
    setDescription('');
    setIsModalOpen(true);
  };

  const openEditModal = async (client: Client) => {
    setEditingClientId(client.id);
    setName(client.name);
    // The list row has masked email/phone — fetch the full record for editing
    // so we don't save the masked value back.
    let full: any = client;
    try {
      const res = (await api.get(`/clients/${client.id}/`)) as any;
      full = res?.data ?? client;
    } catch { /* fall back to the row if detail fetch fails */ }
    setEmail(full.email || '');
    setPhone(full.phone || '');
    setWebsite(full.website || '');
    setDescription(full.description || '');
    setIsModalOpen(true);
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim()) {
      toast.warning('Client name is required.');
      return;
    }
    if (!/^[a-zA-Z0-9&.,'()\s-]+$/.test(name.trim())) {
      toast.warning('Client name cannot contain special characters.');
      return;
    }
    if (!email.trim()) {
      toast.warning('Contact email is required.');
      return;
    }
    if (!phone.trim()) {
      toast.warning('Contact phone is required.');
      return;
    }
    if (!website.trim()) {
      toast.warning('Website URL is required.');
      return;
    }
    const plainDescription = description.replace(/<[^>]*>/g, '').trim();
    if (!plainDescription) {
      toast.warning('Brief description is required.');
      return;
    }
    setSubmitting(true);

    try {
      const clientData = {
        name,
        email: email.trim() || null,
        phone: phone.trim() || null,
        website: website.trim() || null,
        description: description.trim() || null,
      };

      if (editingClientId) {
        await api.put(`/clients/${editingClientId}/`, clientData);
        toast.success('Client updated successfully ✓');
      } else {
        await api.post('/clients/', clientData);
        toast.success('Client created successfully ✓');
      }
      setIsModalOpen(false);
      loadAll();
    } catch (err) {
      toast.error(err instanceof Error ? err.message : 'Operation failed');
    } finally {
      setSubmitting(false);
    }
  };

  const handleDelete = (clientId: number) => {
    showConfirmDelete('Are you sure you want to delete this client? Doing so will affect any job descriptions linked to it.', async () => {
      try {
        await api.delete(`/clients/${clientId}/`);
        toast.success('Client deleted successfully ✓');
        loadAll();
      } catch (err) {
        toast.error(err instanceof Error ? err.message : 'Delete failed');
      }
    });
  };

  if (!user) return null;

  if (loading) return <PageLoader />;

  if (user && user.role !== 'ADMIN' && !user.permissions?.includes('clients.view_client')) {
    return (
      <main className="flex-1 flex items-center justify-center p-8">
            <div className="max-w-md w-full bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-8 text-center shadow-xl space-y-6">
              <div className="mx-auto w-16 h-16 bg-rose-50 dark:bg-rose-950/30 border border-rose-100 dark:border-rose-900/50 rounded-none flex items-center justify-center text-rose-500 animate-bounce">
                <i className="fa-solid fa-lock text-3xl"></i>
              </div>
              <div className="space-y-2">
                <h3 className="text-xl font-bold text-slate-800 dark:text-white">Permission Required</h3>
                <p className="text-sm text-slate-500 dark:text-slate-400 leading-relaxed">
                  You do not have access to view this page. This resource requires the <code className="px-1.5 py-0.5 rounded-none bg-slate-100 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 text-rose-600 dark:text-rose-400 font-mono text-xs">clients.view_client</code> permission.
                </p>
              </div>
              <button
                onClick={() => router.push('/dashboard')}
                className="w-full bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold py-3 rounded-none shadow-lg hover:shadow-indigo-500/20 transition cursor-pointer"
              >
                Go to Dashboard
              </button>
            </div>
          </main>
    );
  }

  return (
    <>
        <main className="flex-1 p-8 overflow-y-auto w-full space-y-6 max-w-7xl mx-auto">
          <BackToDashboard />
          <div className="flex flex-col sm:flex-row gap-4 justify-between sm:items-center">
            <div>
              <p className="text-sm text-slate-500 dark:text-slate-400">Manage list of hiring clients, partner companies, or business divisions.</p>
            </div>
            <div className="flex items-center gap-3">
              {viewMode === 'card' && (
                <button
                  onClick={() => setViewMode('table')}
                  className="bg-slate-105 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-750 dark:text-slate-200 text-xs font-bold px-4 py-2.5 rounded-none shadow transition flex items-center gap-2 cursor-pointer border border-slate-200/40 dark:border-slate-850"
                >
                  <i className="fa-solid fa-table"></i> Table View
                </button>
              )}
              {hasAddPermission && (
                <button
                  onClick={openCreateModal}
                  className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg hover:shadow-indigo-500/20 transition flex items-center gap-2 cursor-pointer"
                >
                  <i className="fa-solid fa-plus text-xs"></i> Add Client
                </button>
              )}
            </div>
          </div>

          {viewMode === 'table' ? (
            <DataTable
              columns={columns}
              data={clients}
              loading={loading}
              pageCount={Math.max(1, Math.ceil(total / pagination.pageSize))}
              controlledPagination={pagination}
              onPaginationChange={setPagination}
              controlledGlobalFilter={search}
              onGlobalFilterChange={setSearch}
              searchPlaceholder="Search clients by name, website, phone or email..."
              emptyStateTitle="No Clients Registered"
              emptyStateDescription="Add a client profile first, then associate job descriptions with it."
              renderAdditionalActions={() => (
                <button
                  onClick={() => setViewMode('card')}
                  className="bg-slate-50 hover:bg-slate-100 dark:bg-slate-950 dark:hover:bg-slate-800 border border-slate-200 dark:border-slate-800 rounded-none px-4 py-2.5 text-xs font-bold transition text-slate-700 dark:text-slate-300 flex items-center gap-1.5 cursor-pointer"
                >
                  <i className="fa-solid fa-grip"></i> Card View
                </button>
              )}
            />
          ) : clients.length === 0 ? (
            <div className="border border-dashed border-slate-300 dark:border-slate-800 rounded-none p-16 text-center text-slate-500 dark:text-slate-400 bg-white dark:bg-slate-900/20">
              <p className="text-lg font-medium mb-1">No clients registered</p>
              <p className="text-sm text-slate-400 dark:text-slate-500 mb-6">Add a client profile first, then associate job descriptions with it.</p>
              {hasAddPermission && (
                <button
                  onClick={openCreateModal}
                  className="bg-slate-800 hover:bg-slate-700 text-white text-sm font-semibold px-4 py-2 rounded-none transition cursor-pointer"
                >
                  Add Client
                </button>
              )}
            </div>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {clients.map((client) => (
                <div
                  key={client.id}
                  className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-none p-6 flex flex-col justify-between hover:border-slate-300 dark:hover:border-slate-700 hover:shadow-md dark:hover:shadow-xl dark:hover:shadow-slate-950 transition duration-300 relative group"
                >
                  <div>
                    <h3 className="text-lg font-bold text-slate-800 dark:text-white mb-3 group-hover:text-indigo-600 dark:group-hover:text-indigo-300 transition duration-200 flex items-center gap-1.5">
                      <i className="fa-solid fa-building text-slate-400 dark:text-slate-500 text-base"></i> {client.name}
                    </h3>
                    
                    <div className="space-y-1.5 text-xs text-slate-500 dark:text-slate-400 mb-4 border-t border-b border-slate-100 dark:border-slate-800 py-3">
                      {client.website && (
                        <p className="truncate flex items-center gap-1.5">
                          <i className="fa-solid fa-globe text-slate-400 dark:text-slate-500"></i> <a href={client.website} target="_blank" rel="noopener noreferrer" className="hover:underline text-indigo-600 dark:text-indigo-400">
                            {client.website}
                          </a>
                        </p>
                      )}
                      {client.email && <p className="truncate flex items-center gap-1.5"><i className="fa-solid fa-envelope text-slate-400 dark:text-slate-500"></i> {client.email}</p>}
                      {client.phone && <p className="flex items-center gap-1.5"><i className="fa-solid fa-phone text-slate-400 dark:text-slate-500"></i> {client.phone}</p>}
                    </div>

                    {client.description && (
                      <p className="text-sm text-slate-600 dark:text-slate-300 line-clamp-3 whitespace-pre-line mb-6">
                        {client.description.replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()}
                      </p>
                    )}
                  </div>

                  {(hasChangePermission || hasDeletePermission) && (
                    <div className="flex items-center gap-2 border-t border-slate-100 dark:border-slate-800 pt-4 mt-auto">
                      {hasChangePermission && (
                        <button
                          onClick={() => openEditModal(client)}
                          className="flex-1 text-center bg-slate-100 hover:bg-slate-200 dark:bg-slate-800 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-200 text-xs font-bold py-2 rounded-none transition cursor-pointer flex items-center justify-center gap-1.5"
                        >
                          <i className="fa-solid fa-pen-to-square"></i> Edit Details
                        </button>
                      )}
                      {hasDeletePermission && (
                        <button
                          onClick={() => handleDelete(client.id)}
                          className="text-center bg-rose-50 hover:bg-rose-100/70 dark:bg-rose-950/30 dark:hover:bg-rose-900/50 dark:border-rose-900/40 text-rose-600 dark:text-rose-450 border border-rose-200 dark:border-rose-900/40 text-xs font-bold p-2.5 rounded-none transition cursor-pointer"
                          title="Delete Client"
                        >
                          <i className="fa-solid fa-trash"></i>
                        </button>
                      )}
                    </div>
                  )}
                </div>
              ))}
            </div>
          )}

          {/* Card-view pagination (table view has its own footer) */}
          {viewMode === 'card' && total > pagination.pageSize && (
            <div className="flex items-center justify-between mt-6 text-sm text-slate-600 dark:text-slate-400">
              <span>
                Page {pagination.pageIndex + 1} of {Math.max(1, Math.ceil(total / pagination.pageSize))}
                <span className="text-slate-400 dark:text-slate-500"> · {total} total</span>
              </span>
              <div className="flex items-center gap-2">
                <button
                  onClick={() => setPagination((p) => ({ ...p, pageIndex: Math.max(0, p.pageIndex - 1) }))}
                  disabled={pagination.pageIndex === 0}
                  className="px-3 py-1.5 border border-slate-200 dark:border-slate-800 rounded-none font-semibold disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
                >
                  Previous
                </button>
                <button
                  onClick={() => setPagination((p) => ({ ...p, pageIndex: Math.min(Math.ceil(total / p.pageSize) - 1, p.pageIndex + 1) }))}
                  disabled={pagination.pageIndex >= Math.ceil(total / pagination.pageSize) - 1}
                  className="px-3 py-1.5 border border-slate-200 dark:border-slate-800 rounded-none font-semibold disabled:opacity-40 disabled:cursor-not-allowed hover:bg-slate-50 dark:hover:bg-slate-800 cursor-pointer"
                >
                  Next
                </button>
              </div>
            </div>
          )}
        </main>

      {/* Modal Dialog */}
      {isModalOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
          <div className="fixed inset-0 bg-slate-950/40 dark:bg-slate-950/80 backdrop-blur-sm" onClick={() => setIsModalOpen(false)}></div>
          <div className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-none p-6 relative z-10 shadow-2xl animate-in fade-in zoom-in duration-200 text-slate-800 dark:text-slate-100">
            <h3 className="text-xl font-bold mb-4 text-slate-900 dark:text-white">
              {editingClientId ? 'Edit Client Details' : 'Register New Client'}
            </h3>
            <form onSubmit={handleSubmit} className="space-y-4">
              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Company / Client Name <span className="text-rose-500">*</span></label>
                <input
                  value={name}
                  placeholder="e.g. Google LLC"
                  onChange={(e) => {
                    const sanitized = e.target.value.replace(/[^a-zA-Z0-9&.,'()\s-]/g, '');
                    setName(sanitized);
                  }}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white"
                />
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Contact Email <span className="text-rose-500">*</span></label>
                  <input
                    value={email}
                    type="email"
                    placeholder="hr@company.com"
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white"
                  />
                </div>
                <div>
                  <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Contact Phone <span className="text-rose-500">*</span></label>
                  <input
                    value={phone}
                    placeholder="10-digit contact number"
                    inputMode="numeric"
                    pattern="[0-9]*"
                    onChange={(e) => {
                      const numericVal = e.target.value.replace(/\D/g, '').slice(0, 10);
                      setPhone(numericVal);
                    }}
                    className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white"
                  />
                </div>
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Website URL <span className="text-rose-500">*</span></label>
                <input
                  value={website}
                  placeholder="https://company.com"
                  onChange={(e) => setWebsite(e.target.value)}
                  className="w-full bg-slate-50 dark:bg-slate-950 border border-slate-200 dark:border-slate-800 focus:border-indigo-500 rounded-none px-4 py-2.5 text-sm focus:outline-none transition text-slate-900 dark:text-white"
                />
              </div>

              <div>
                <label className="block text-xs font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-1">Brief Description <span className="text-rose-500">*</span></label>
                <RichTextEditor
                  value={description}
                  onChange={setDescription}
                  height={240}
                  placeholder="Industry sector, headquarters location, company profile details..."
                />
              </div>

              <div className="flex justify-end gap-3 pt-4 border-t border-slate-100 dark:border-slate-800">
                <button
                  type="button"
                  onClick={() => setIsModalOpen(false)}
                  className="px-4 py-2 text-sm text-slate-500 hover:text-slate-800 dark:text-slate-400 dark:hover:text-white transition cursor-pointer"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  disabled={submitting}
                  className="bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-400 dark:disabled:bg-indigo-800 text-white text-sm font-semibold px-5 py-2.5 rounded-none shadow-lg transition cursor-pointer"
                >
                  {submitting ? 'Saving...' : editingClientId ? 'Save Changes' : 'Register'}
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </>
  );
}