'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import AdminLogo from '../../components/AdminLogo';

interface JobAction {
  id: number;
  action_type: string;
  part_type: string | null;
  part_id: string | null;
  custom_price: number;
  labour_fee: number;
  created_at: string;
}

interface Vehicle {
  id: string;
  make: string;
  model: string;
  capacity: number | null;
  yom: number | null;
  owner: number | null;
}

interface Customer {
  id: number;
  name: string;
  address: string;
}

interface ServiceRecord {
  id: number;
  created_at: string;
  vehicle: string;
  metadata: string | null;
  status: number;
  mileage: number | null;
  Vehicles?: Vehicle;
}

export default function JobsListPage() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const router = useRouter();
  const [jobs, setJobs] = useState<ServiceRecord[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchQuery, setSearchQuery] = useState('');
  const [customers, setCustomers] = useState<Customer[]>([]);
  const [selectedJob, setSelectedJob] = useState<ServiceRecord | null>(null);
  const [jobActions, setJobActions] = useState<JobAction[]>([]);
  const [loadingActions, setLoadingActions] = useState(false);

  useEffect(() => {
    const adminLoggedIn = sessionStorage.getItem('adminLoggedIn');
    if (adminLoggedIn !== 'true') {
      router.push('/admin');
      return;
    }
    setIsAuthenticated(true);
    loadJobs();
    loadCustomers();
  }, [router]);

  // Close modal when clicking outside or pressing Escape
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape' && selectedJob) {
        setSelectedJob(null);
        setJobActions([]);
      }
    };

    if (selectedJob) {
      document.addEventListener('keydown', handleEscape);
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [selectedJob]);

  const loadJobs = async () => {
    try {
      setLoading(true);
      const response = await fetch('/api/admin/jobs');
      if (response.ok) {
        const data = await response.json();
        setJobs(data);
      } else {
        console.error('Failed to load jobs');
      }
    } catch (error) {
      console.error('Error loading jobs:', error);
    } finally {
      setLoading(false);
    }
  };

  const loadCustomers = async () => {
    try {
      const response = await fetch('/api/admin/customers');
      if (response.ok) {
        const data = await response.json();
        setCustomers(data);
      }
    } catch (error) {
      console.error('Error loading customers:', error);
    }
  };

  const getCustomerName = (ownerId: number | null | undefined) => {
    if (!ownerId) return 'Unknown';
    const customer = customers.find(c => c.id === ownerId);
    return customer ? customer.name : 'Unknown';
  };

  const getStatusLabel = (status: number) => {
    switch (status) {
      case 0: return 'Pending';
      case 1: return 'Active';
      case 2: return 'Waiting for Customer Response';
      case 3: return 'Waiting for Parts';
      case 10: return 'Completed';
      default: return 'Unknown';
    }
  };

  const getStatusColor = (status: number) => {
    switch (status) {
      case 0: return 'text-white/60';
      case 1: return 'text-cyan-400';
      case 2: return 'text-yellow-400';
      case 3: return 'text-orange-400';
      case 10: return 'text-green-400';
      default: return 'text-white/60';
    }
  };

  const handleShowDetails = async (job: ServiceRecord) => {
    setSelectedJob(job);
    setLoadingActions(true);
    try {
      const response = await fetch(`/api/admin/jobs/${job.id}/actions`);
      if (response.ok) {
        const data = await response.json();
        setJobActions(data);
      } else {
        console.error('Failed to load job actions');
        setJobActions([]);
      }
    } catch (error) {
      console.error('Error loading job actions:', error);
      setJobActions([]);
    } finally {
      setLoadingActions(false);
    }
  };

  const filteredJobs = jobs.filter(job => {
    if (!searchQuery.trim()) return true;
    const query = searchQuery.toLowerCase();
    const vehicleId = job.Vehicles?.id?.toLowerCase() || '';
    const vehicleMake = job.Vehicles?.make?.toLowerCase() || '';
    const vehicleModel = job.Vehicles?.model?.toLowerCase() || '';
    const metadata = job.metadata?.toLowerCase() || '';
    const customerName = getCustomerName(job.Vehicles?.owner).toLowerCase();
    const statusLabel = getStatusLabel(job.status).toLowerCase();
    
    return (
      vehicleId.includes(query) ||
      vehicleMake.includes(query) ||
      vehicleModel.includes(query) ||
      metadata.includes(query) ||
      customerName.includes(query) ||
      statusLabel.includes(query)
    );
  });

  if (!isAuthenticated) {
    return null;
  }

  return (
    <>
      <AdminLogo />
      <div className="relative min-h-screen bg-black tech-grid scanlines">
        {/* Animated background elements */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse"></div>
          <div className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-white/5 blur-3xl animate-pulse delay-1000"></div>
        </div>

        <div className="relative mx-auto max-w-6xl px-4 py-12">
          <div className="relative rounded-lg border-2 border-white/30 bg-black/80 backdrop-blur-sm p-8 neon-border-glow">
            <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
            <div className="relative">
              <div className="mb-6 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
                  <h1 className="text-3xl font-bold text-white uppercase tracking-wider neon-glow">
                    All Jobs
                  </h1>
                </div>
                <Link
                  href="/admin/dashboard"
                  className="text-sm font-medium text-white/60 hover:text-white transition-colors font-mono uppercase tracking-wider border border-white/20 px-3 py-1 rounded hover:border-white/40 hover:bg-white/10"
                >
                  ← Back to Dashboard
                </Link>
              </div>

              {/* Search Bar */}
              <div className="mb-6">
                <input
                  type="text"
                  value={searchQuery}
                  onChange={(e) => setSearchQuery(e.target.value)}
                  placeholder="Search by vehicle number, make, model, customer, status, or metadata..."
                  className="w-full rounded-lg border-2 border-white/20 bg-black/50 px-4 py-3 font-mono text-white placeholder-white/40 focus:border-white/50 focus:outline-none focus:ring-2 focus:ring-white/30 neon-border transition-all"
                />
              </div>

              {/* Jobs List */}
              {loading ? (
                <div className="text-center py-12">
                  <div className="h-2 w-2 rounded-full bg-white animate-pulse mx-auto mb-4"></div>
                  <p className="text-white/60 font-mono uppercase tracking-wider">Loading Jobs...</p>
                </div>
              ) : filteredJobs.length === 0 ? (
                <div className="text-center py-12">
                  <p className="text-white/60 font-mono uppercase tracking-wider">
                    {searchQuery ? 'No jobs found matching your search' : 'No jobs found'}
                  </p>
                </div>
              ) : (
                <div className="space-y-4">
                  {filteredJobs.map((job) => (
                    <div
                      key={job.id}
                      className="rounded-lg border-2 border-white/20 bg-black/50 p-6 transition-all hover:border-white/40 hover:bg-white/5 hover:shadow-[0_0_15px_rgba(255,255,255,0.2)]"
                    >
                      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
                        <div>
                          <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                            Vehicle
                          </div>
                          <div className="text-white font-mono font-semibold">
                            {job.Vehicles?.id || 'N/A'}
                          </div>
                          <div className="text-sm text-white/70 font-mono">
                            {job.Vehicles?.make || 'N/A'} {job.Vehicles?.model || ''}
                            {job.Vehicles?.capacity && ` (${job.Vehicles.capacity}cc)`}
                          </div>
                        </div>

                        <div>
                          <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                            Customer
                          </div>
                          <div className="text-white font-mono">
                            {getCustomerName(job.Vehicles?.owner)}
                          </div>
                        </div>

                        <div>
                          <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                            Status
                          </div>
                          <div className={`font-mono font-semibold ${getStatusColor(job.status)}`}>
                            {getStatusLabel(job.status)}
                          </div>
                        </div>

                        <div>
                          <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                            Created At
                          </div>
                          <div className="text-white font-mono text-sm">
                            {new Date(job.created_at).toLocaleString()}
                          </div>
                        </div>

                        {job.mileage !== null && (
                          <div>
                            <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                              Mileage
                            </div>
                            <div className="text-white font-mono text-sm">
                              {job.mileage.toLocaleString()} km
                            </div>
                          </div>
                        )}
                      </div>

                      {job.metadata && (
                        <div className="mt-4 pt-4 border-t border-white/10">
                          <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                            Notes
                          </div>
                          <div className="text-white/80 font-mono text-sm">
                            {job.metadata}
                          </div>
                        </div>
                      )}

                      <div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between">
                        <div className="text-xs text-white/40 font-mono">
                          Service Record ID: {job.id}
                        </div>
                        <div className="flex gap-2">
                          <button
                            onClick={() => router.push(`/admin/jobs/${job.id}/edit`)}
                            className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] font-mono uppercase tracking-wider"
                          >
                            Edit
                          </button>
                          <button
                            onClick={() => handleShowDetails(job)}
                            className="rounded-lg border border-cyan-500/50 bg-cyan-500/10 px-4 py-2 text-sm font-medium text-cyan-400 transition-all hover:bg-cyan-500/20 hover:border-cyan-500 hover:shadow-[0_0_15px_rgba(0,191,255,0.4)] font-mono uppercase tracking-wider"
                          >
                            Show Details
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              )}

              {!loading && filteredJobs.length > 0 && (
                <div className="mt-6 text-center">
                  <p className="text-white/60 font-mono text-sm uppercase tracking-wider">
                    Showing {filteredJobs.length} of {jobs.length} jobs
                  </p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>

      {/* Job Details Modal */}
      {selectedJob && (
        <div 
          className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4 overflow-y-auto"
          onClick={() => {
            setSelectedJob(null);
            setJobActions([]);
          }}
        >
          <div 
            className="relative w-full max-w-4xl rounded-lg border-2 border-white/30 bg-black/95 backdrop-blur-sm p-8 neon-border-glow my-8" 
            onClick={(e) => e.stopPropagation()}
          >
            <div className="absolute inset-0 rounded-lg bg-gradient-to-br from-white/5 to-transparent"></div>
            <div className="relative">
              <div className="mb-6 flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <div className="h-2 w-2 rounded-full bg-white animate-pulse"></div>
                  <h2 className="text-2xl font-bold text-white uppercase tracking-wider neon-glow">
                    Job Details
                  </h2>
                </div>
                <div className="flex items-center gap-3">
                  <button
                    onClick={() => router.push(`/admin/jobs/${selectedJob.id}/edit`)}
                    className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)] font-mono uppercase tracking-wider"
                  >
                    Edit
                  </button>
                  <button
                    onClick={() => {
                      setSelectedJob(null);
                      setJobActions([]);
                    }}
                    className="text-white/60 hover:text-white text-2xl transition-colors"
                  >
                    ✕
                  </button>
                </div>
              </div>

              {/* Service Record Details */}
              <div className="mb-8 space-y-4">
                <div className="grid gap-4 md:grid-cols-2">
                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Service Record ID
                    </div>
                    <div className="text-white font-mono font-semibold">
                      #{selectedJob.id}
                    </div>
                  </div>

                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Status
                    </div>
                    <div className={`font-mono font-semibold ${getStatusColor(selectedJob.status)}`}>
                      {getStatusLabel(selectedJob.status)}
                    </div>
                  </div>

                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Vehicle Number
                    </div>
                    <div className="text-white font-mono font-semibold">
                      {selectedJob.Vehicles?.id || 'N/A'}
                    </div>
                    <div className="text-sm text-white/70 font-mono">
                      {selectedJob.Vehicles?.make || 'N/A'} {selectedJob.Vehicles?.model || ''}
                      {selectedJob.Vehicles?.capacity && ` (${selectedJob.Vehicles.capacity}cc)`}
                    </div>
                  </div>

                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Customer
                    </div>
                    <div className="text-white font-mono">
                      {getCustomerName(selectedJob.Vehicles?.owner)}
                    </div>
                    {selectedJob.Vehicles?.owner && (
                      <div className="text-sm text-white/60 font-mono">
                        Customer ID: {selectedJob.Vehicles.owner}
                      </div>
                    )}
                  </div>

                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Created At
                    </div>
                    <div className="text-white font-mono text-sm">
                      {new Date(selectedJob.created_at).toLocaleString()}
                    </div>
                  </div>

                  {selectedJob.mileage !== null && (
                    <div>
                      <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                        Mileage
                      </div>
                      <div className="text-white font-mono text-sm">
                        {selectedJob.mileage.toLocaleString()} km
                      </div>
                    </div>
                  )}
                </div>

                {selectedJob.metadata && (
                  <div>
                    <div className="mb-1 text-xs text-white/60 font-mono uppercase tracking-wider">
                      Metadata / Notes
                    </div>
                    <div className="text-white/80 font-mono text-sm bg-black/50 rounded-lg p-4 border border-white/10">
                      {selectedJob.metadata}
                    </div>
                  </div>
                )}
              </div>

              {/* Job Actions List */}
              <div className="border-t border-white/20 pt-6">
                <div className="mb-4 flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <div className="h-2 w-2 rounded-full bg-cyan-500"></div>
                    <h3 className="text-xl font-bold text-white uppercase tracking-wider">
                      Job Actions
                    </h3>
                  </div>
                  <div className="text-sm text-white/60 font-mono">
                    {jobActions.length} action{jobActions.length !== 1 ? 's' : ''}
                  </div>
                </div>

                {loadingActions ? (
                  <div className="text-center py-8">
                    <div className="h-2 w-2 rounded-full bg-white animate-pulse mx-auto mb-2"></div>
                    <p className="text-white/60 font-mono text-sm uppercase tracking-wider">
                      Loading Actions...
                    </p>
                  </div>
                ) : jobActions.length === 0 ? (
                  <div className="text-center py-8 rounded-lg border border-white/10 bg-black/50">
                    <p className="text-white/60 font-mono uppercase tracking-wider">
                      No job actions found
                    </p>
                  </div>
                ) : (
                  <div className="overflow-x-auto max-h-96 overflow-y-auto">
                    <table className="w-full border-collapse">
                      <thead className="sticky top-0 bg-black/95">
                        <tr className="border-b-2 border-white/20">
                          <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Action Type</th>
                          <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Part Type</th>
                          <th className="px-4 py-3 text-left text-xs font-bold text-white uppercase tracking-wider font-mono">Part ID</th>
                          <th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Labour Fee</th>
                          <th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Parts Price</th>
                          <th className="px-4 py-3 text-right text-xs font-bold text-white uppercase tracking-wider font-mono">Total</th>
                        </tr>
                      </thead>
                      <tbody>
                        {jobActions.map((action, index) => {
                          const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
                          const rowTotal = action.labour_fee + partsPrice;
                          return (
                            <tr
                              key={action.id}
                              className={`border-b border-white/10 hover:bg-white/5 transition-colors ${index % 2 === 0 ? 'bg-black/30' : 'bg-black/50'}`}
                            >
                              <td className="px-4 py-3 text-white font-mono font-semibold">{action.action_type}</td>
                              <td className="px-4 py-3 text-white/80 font-mono">{action.part_type || '-'}</td>
                              <td className="px-4 py-3 text-white/80 font-mono">{action.part_id || '-'}</td>
                              <td className="px-4 py-3 text-right text-white font-mono">රු.{action.labour_fee || 0}</td>
                              <td className="px-4 py-3 text-right text-white font-mono">{partsPrice > 0 ? `රු.${partsPrice}` : '-'}</td>
                              <td className="px-4 py-3 text-right text-white font-mono font-semibold">රු.{rowTotal}</td>
                            </tr>
                          );
                        })}
                        <tr className="border-t-2 border-white/30 bg-black/70 font-bold sticky bottom-0">
                          <td colSpan={5} className="px-4 py-4 text-right text-white font-mono uppercase tracking-wider">
                            Total Cost:
                          </td>
                          <td className="px-4 py-4 text-right text-white font-mono text-lg font-bold">
                            රු.{jobActions.reduce((sum, action) => {
                              const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
                              return sum + action.labour_fee + partsPrice;
                            }, 0)}
                          </td>
                        </tr>
                        <tr className="bg-black/70 sticky bottom-0">
                          <td colSpan={6} className="px-4 pb-2 text-right text-white/60 font-mono text-xs">
                            <div className="flex justify-end gap-4">
                              <span>Labour: රු.{jobActions.reduce((sum, action) => sum + action.labour_fee, 0)}</span>
                              <span>Parts: රු.{jobActions.reduce((sum, action) => {
                                const partsPrice = action.custom_price > 0 && action.custom_price !== -1 ? action.custom_price : 0;
                                return sum + partsPrice;
                              }, 0)}</span>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                )}
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}