'use client';

import React, { useState, useEffect } from 'react';
import { Plus, Pencil, Trash2, Search, AlertCircle } from 'lucide-react';
import { useAuthStore } from '@/stores';
import dispatchHistoryService from '@/services/dispatchHistoryService';
import DispatchFormModal from '@/components/dispatch/DispatchFormModal';
import type { DispatchHistory } from '@/types';

export default function DispatchManagePage() {
  const user = useAuthStore((s) => s.user);
  const [items, setItems] = useState<DispatchHistory[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [modalOpen, setModalOpen] = useState(false);
  const [editData, setEditData] = useState<Record<string, unknown> | null>(null);
  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);

  const fetchData = () => {
    dispatchHistoryService.getAll({ size: 100 }).then((res) => {
      setItems(res.data.content || []);
    }).catch(() => {
      console.error('Failed to fetch dispatches');
    }).finally(() => {
      setLoading(false);
    });
  };

  useEffect(() => { fetchData(); }, []);

  const handleDelete = async (id: number) => {
    try {
      await dispatchHistoryService.deleteDispatch(id);
      setDeleteConfirm(null);
      fetchData();
    } catch {
      alert('Failed to delete dispatch.');
    }
  };

  if (!user || user.roleCode === 'EMPLOYEE') {
    return (
      <div className="p-4 sm:p-6 lg:p-8">
        <div className="max-w-7xl mx-auto text-center py-20">
          <AlertCircle className="w-12 h-12 text-text-muted mx-auto mb-4" />
          <h2 className="text-xl font-semibold text-text-main mb-2">Access Denied</h2>
          <p className="text-text-muted text-sm">Only managers and admins can access this page.</p>
        </div>
      </div>
    );
  }

  const filtered = items.filter((item) =>
    item.projectName?.toLowerCase().includes(search.toLowerCase()) ||
    item.roleTitle?.toLowerCase().includes(search.toLowerCase())
  );

  return (
    <div className="p-4 sm:p-6 lg:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
          <div>
            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main">Dispatch Management</h2>
            <p className="text-text-muted text-sm mt-1">Manage employee project assignments</p>
          </div>
          <button
            onClick={() => { setEditData(null); setModalOpen(true); }}
            className="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-xl text-sm font-semibold flex items-center gap-2 transition-all"
          >
            <Plus className="w-4 h-4" />
            New Dispatch
          </button>
        </div>

        <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
          <div className="p-4 sm:p-6 border-b border-border">
            <div className="relative w-full sm:w-72">
              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
              <input
                type="text"
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                placeholder="Search by project or role..."
                className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
              />
            </div>
          </div>

          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-gray-50/50">
                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Project</th>
                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Role</th>
                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Employee</th>
                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Period</th>
                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Actions</th>
                </tr>
              </thead>
              <tbody className="text-sm divide-y divide-gray-100">
                {loading && <tr><td colSpan={5} className="py-8 text-center text-text-muted">Loading...</td></tr>}
                {!loading && filtered.length === 0 && (
                  <tr><td colSpan={5} className="py-8 text-center text-text-muted">No dispatch records found.</td></tr>
                )}
                {filtered.map((item) => (
                  <tr key={item.dispatchId} className="hover:bg-gray-50 transition-colors">
                    <td className="py-4 px-4 sm:px-6 font-medium text-text-main">{item.projectName || `Project #${item.projectId}`}</td>
                    <td className="py-4 px-4 sm:px-6">
                      <span className="text-xs font-medium bg-indigo-50 text-primary px-2 py-1 rounded-lg">{item.roleTitle}</span>
                    </td>
                    <td className="py-4 px-4 sm:px-6 text-text-muted">Emp #{item.empId}</td>
                    <td className="py-4 px-4 sm:px-6 text-text-muted">
                      {item.startDate} ~ {item.endDate || 'Present'}
                    </td>
                    <td className="py-4 px-4 sm:px-6">
                      <div className="flex items-center gap-2">
                        <button
                          onClick={() => { setEditData(item as unknown as Record<string, unknown>); setModalOpen(true); }}
                          className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
                          title="Edit"
                        >
                          <Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
                        </button>
                        <button
                          onClick={() => setDeleteConfirm(item.dispatchId)}
                          className="p-1.5 hover:bg-red-50 rounded-lg transition-colors"
                          title="Delete"
                        >
                          <Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <DispatchFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} onSaved={fetchData} editData={editData} />

        {deleteConfirm && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setDeleteConfirm(null)}>
            <div className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
              <h3 className="font-outfit font-semibold text-lg text-text-main mb-2">Delete Dispatch</h3>
              <p className="text-sm text-text-muted mb-4">Are you sure you want to delete this dispatch record?</p>
              <div className="flex justify-end gap-3">
                <button onClick={() => setDeleteConfirm(null)} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors">Cancel</button>
                <button onClick={() => handleDelete(deleteConfirm)} className="px-4 py-2 rounded-xl text-sm font-semibold bg-status-critical-text text-white hover:bg-red-700 transition-colors">Delete</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}