'use client';

import { useCallback, useEffect, useState } from 'react';
import { DashboardLayout } from '@/components/layout/DashboardLayout';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { api } from '@/lib/api';
import {
  AdminEmpty,
  AdminError,
  AdminLoading,
  AdminTable,
  AdminTd,
  AdminTh,
  PaginationBar,
  PaginationMeta,
  StatusBadge,
  formatDate,
} from '@/components/admin/admin-ui';

const JOB_STATUSES = ['OPEN', 'QUOTED', 'ACCEPTED', 'IN_PROGRESS', 'COMPLETED', 'CANCELLED'];

interface JobRow {
  id: string;
  title: string;
  status: string;
  location: string | null;
  budget: number | null;
  createdAt: string;
  category: { name: string };
  customer: { firstName: string; lastName: string };
  _count: { quotations: number };
}

export default function AdminJobsPage() {
  const [jobs, setJobs] = useState<JobRow[]>([]);
  const [meta, setMeta] = useState<PaginationMeta>({ page: 1, limit: 20, total: 0, totalPages: 0 });
  const [search, setSearch] = useState('');
  const [statusFilter, setStatusFilter] = useState('');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [updating, setUpdating] = useState<string | null>(null);

  const load = useCallback(async (page = 1) => {
    setLoading(true);
    setError('');
    try {
      const params = new URLSearchParams({ page: String(page), limit: '20' });
      if (search) params.set('search', search);
      if (statusFilter) params.set('status', statusFilter);
      const res = await api<{ data: JobRow[]; meta: PaginationMeta }>(`/jobs?${params}`);
      setJobs(res.data);
      setMeta(res.meta!);
    } catch (e) {
      setError(e instanceof Error ? e.message : 'Failed to load jobs');
    } finally {
      setLoading(false);
    }
  }, [search, statusFilter]);

  useEffect(() => {
    load(1);
  }, [load]);

  async function updateStatus(jobId: string, status: string) {
    setUpdating(jobId);
    try {
      const res = await api<{ data: JobRow }>(`/jobs/${jobId}/status`, {
        method: 'PATCH',
        body: JSON.stringify({ status }),
      });
      setJobs((prev) => prev.map((j) => (j.id === jobId ? { ...j, status: res.data.status } : j)));
    } catch (e) {
      alert(e instanceof Error ? e.message : 'Update failed');
    } finally {
      setUpdating(null);
    }
  }

  return (
    <DashboardLayout role="admin" title="Jobs">
      <div className="flex flex-col sm:flex-row gap-3 mb-6">
        <Input
          placeholder="Search jobs…"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="flex-1"
        />
        <select
          value={statusFilter}
          onChange={(e) => setStatusFilter(e.target.value)}
          className="search-input h-11 px-3 rounded-md border border-border"
        >
          <option value="">All statuses</option>
          {JOB_STATUSES.map((s) => (
            <option key={s} value={s}>
              {s.replace(/_/g, ' ')}
            </option>
          ))}
        </select>
        <Button onClick={() => load(1)}>Search</Button>
      </div>

      {loading && <AdminLoading />}
      {!loading && error && <AdminError message={error} />}
      {!loading && !error && jobs.length === 0 && <AdminEmpty message="No jobs found." />}
      {!loading && !error && jobs.length > 0 && (
        <>
          <AdminTable>
            <thead>
              <tr>
                <AdminTh>Job</AdminTh>
                <AdminTh>Customer</AdminTh>
                <AdminTh>Location</AdminTh>
                <AdminTh>Quotes</AdminTh>
                <AdminTh>Status</AdminTh>
                <AdminTh>Posted</AdminTh>
              </tr>
            </thead>
            <tbody>
              {jobs.map((job) => (
                <tr key={job.id} className="hover:bg-slate-50/50">
                  <AdminTd>
                    <p className="font-medium text-slate-900">{job.title}</p>
                    <p className="text-xs text-muted">{job.category.name}</p>
                    {job.budget != null && (
                      <p className="text-xs text-slate-500">₱{job.budget.toLocaleString()}</p>
                    )}
                  </AdminTd>
                  <AdminTd>
                    {job.customer.firstName} {job.customer.lastName}
                  </AdminTd>
                  <AdminTd>{job.location || '—'}</AdminTd>
                  <AdminTd>{job._count.quotations}</AdminTd>
                  <AdminTd>
                    <select
                      value={job.status}
                      disabled={updating === job.id}
                      onChange={(e) => updateStatus(job.id, e.target.value)}
                      className="text-xs border border-border rounded px-2 py-1.5 bg-white"
                    >
                      {JOB_STATUSES.map((s) => (
                        <option key={s} value={s}>
                          {s.replace(/_/g, ' ')}
                        </option>
                      ))}
                    </select>
                  </AdminTd>
                  <AdminTd>{formatDate(job.createdAt)}</AdminTd>
                </tr>
              ))}
            </tbody>
          </AdminTable>
          <PaginationBar meta={meta} onPageChange={load} />
        </>
      )}
    </DashboardLayout>
  );
}