'use client';

import { useState, use } from 'react';
import Link from 'next/link';
import { useRouter, useSearchParams } from 'next/navigation';
import {
  Wrench, ArrowLeft, Bike, AlertTriangle, Calendar, DollarSign, Clock,
  CheckCircle, XCircle, Search, RefreshCw, ChevronLeft, ChevronRight,
  Eye, User, FileText, ArrowRight, ShieldAlert, Sparkles
} from 'lucide-react';

interface HistoryRecord {
  id: string;
  date: string;
  type: 'damage' | 'maintenance' | 'service' | 'repair' | 'inspection';
  severity: 'critical' | 'major' | 'minor' | 'cosmetic';
  status: 'reported' | 'in_progress' | 'parts_ordered' | 'completed' | 'cancelled';
  description: string;
  cost: number;
  reporter: string;
  resolvedAt?: string;
  partsUsed?: string[];
}

export default function BikeMaintenanceHistoryPage({ params }: { params: Promise<{ id: string }> }) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const bikeId = use(params).id;
  const fromRecord = searchParams.get('from');

  // Realistic mock data for a specific bike's maintenance and damage history
  const [historyList] = useState<HistoryRecord[]>(() => {
    return [
      {
        id: 'MNT-001',
        date: '2024-03-21',
        type: 'damage',
        severity: 'major',
        status: 'in_progress',
        description: 'Front fender damaged in minor collision at Gulshan signal.',
        cost: 3200,
        reporter: 'Sofiq Rahman (Biker)',
        partsUsed: ['Front fender', 'Mounting brackets']
      },
      {
        id: 'MNT-005',
        date: '2024-03-17',
        type: 'inspection',
        severity: 'minor',
        status: 'completed',
        description: 'Monthly scheduled routine vehicle inspection.',
        cost: 250,
        reporter: 'Gulshan Hub Staff',
        resolvedAt: '2024-03-17',
        partsUsed: []
      },
      {
        id: 'MNT-012',
        date: '2024-02-10',
        type: 'repair',
        severity: 'critical',
        status: 'completed',
        description: 'Motor controller overheating check & throttle replacement.',
        cost: 7500,
        reporter: 'System Alert',
        resolvedAt: '2024-02-12',
        partsUsed: ['Throttle Assembly', 'Controller Fan']
      },
      {
        id: 'MNT-018',
        date: '2024-01-15',
        type: 'service',
        severity: 'minor',
        status: 'completed',
        description: 'Chain lubrication, brake shoe calibration, and mirror tightening.',
        cost: 600,
        reporter: 'Kamal Ahmed (Biker)',
        resolvedAt: '2024-01-15',
        partsUsed: ['Brake Shoe Set']
      },
      {
        id: 'MNT-022',
        date: '2023-12-05',
        type: 'damage',
        severity: 'cosmetic',
        status: 'completed',
        description: 'Side mirror cracked due to parking slip.',
        cost: 800,
        reporter: 'Kamal Ahmed (Biker)',
        resolvedAt: '2023-12-06',
        partsUsed: ['Left Side Mirror']
      }
    ];
  });

  // Client Side Filter & Sorting States
  const [searchQuery, setSearchQuery] = useState('');
  const [typeFilter, setTypeFilter] = useState('all');
  const [statusFilter, setStatusFilter] = useState('all');
  const [dateFrom, setDateFrom] = useState('');
  const [dateTo, setDateTo] = useState('');
  const [sortBy, setSortBy] = useState<'date' | 'cost' | 'severity'>('date');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [page, setPage] = useState(1);
  const pageSize = 5;

  const handleSort = (field: 'date' | 'cost' | 'severity') => {
    if (sortBy === field) {
      setSortOrder(prev => (prev === 'asc' ? 'desc' : 'asc'));
    } else {
      setSortBy(field);
      setSortOrder('desc');
    }
    setPage(1);
  };

  // Logic
  const filteredList = historyList.filter(item => {
    if (typeFilter !== 'all') {
      if (typeFilter === 'damage_all') {
        if (item.type !== 'damage') return false;
      } else if (typeFilter === 'damage_cosmetic') {
        if (item.type !== 'damage' || item.severity !== 'cosmetic') return false;
      } else if (typeFilter === 'damage_minor') {
        if (item.type !== 'damage' || item.severity !== 'minor') return false;
      } else if (typeFilter === 'damage_major') {
        if (item.type !== 'damage' || item.severity !== 'major') return false;
      } else if (typeFilter === 'damage_critical') {
        if (item.type !== 'damage' || item.severity !== 'critical') return false;
      } else if (typeFilter === 'maintenance_all') {
        if (item.type === 'damage') return false;
      } else if (typeFilter === 'maintenance_service') {
        if (item.type !== 'service') return false;
      } else if (typeFilter === 'maintenance_repair') {
        if (item.type !== 'repair') return false;
      } else if (typeFilter === 'maintenance_inspection') {
        if (item.type !== 'inspection') return false;
      }
    }
    if (statusFilter !== 'all' && item.status !== statusFilter) return false;
    if (searchQuery && !item.description.toLowerCase().includes(searchQuery.toLowerCase()) && !item.id.toLowerCase().includes(searchQuery.toLowerCase())) return false;
    if (dateFrom && new Date(item.date) < new Date(dateFrom)) return false;
    if (dateTo && new Date(item.date) > new Date(dateTo)) return false;
    return true;
  });

  const sortedList = [...filteredList].sort((a, b) => {
    let comp = 0;
    if (sortBy === 'date') {
      comp = new Date(a.date).getTime() - new Date(b.date).getTime();
    } else if (sortBy === 'cost') {
      comp = a.cost - b.cost;
    } else if (sortBy === 'severity') {
      const ranks = { critical: 4, major: 3, minor: 2, cosmetic: 1 };
      comp = ranks[a.severity] - ranks[b.severity];
    }
    return sortOrder === 'desc' ? -comp : comp;
  });

  // Pagination
  const totalPages = Math.ceil(sortedList.length / pageSize);
  const paginatedList = sortedList.slice((page - 1) * pageSize, page * pageSize);

  // Status/Severity Badge Colors
  const severityColors = {
    critical: 'bg-red-100 text-red-700',
    major: 'bg-orange-100 text-orange-700',
    minor: 'bg-amber-100 text-amber-700',
    cosmetic: 'bg-slate-100 text-slate-700',
  };

  const statusColors = {
    reported: 'bg-amber-50 text-amber-700 border border-amber-200',
    in_progress: 'bg-blue-50 text-blue-700 border border-blue-200',
    parts_ordered: 'bg-purple-50 text-purple-700 border border-purple-200',
    completed: 'bg-green-50 text-green-700 border border-green-200',
    cancelled: 'bg-red-50 text-red-700 border border-red-200',
  };

  const totalCost = filteredList.reduce((sum, item) => sum + item.cost, 0);
  const criticalCount = filteredList.filter(item => item.severity === 'critical' || item.severity === 'major').length;

  return (
    <div className="p-4 lg:p-6 max-w-8xl mx-auto">
      {/* Back navigation links */}
      <div className="flex items-center gap-3 mb-6">
        <button
          onClick={() => {
            if (fromRecord) {
              router.push(`/admin/maintenance/${fromRecord}`);
            } else {
              router.push('/admin/maintenance');
            }
          }}
          className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors bg-white shadow-sm"
        >
          <ArrowLeft className="w-4 h-4 text-slate-600" />
        </button>
        <div>
          <h1 className="text-2xl font-extrabold text-slate-800 flex items-center gap-2">
            <Bike className="w-6 h-6 text-purple-600" /> History Ledger
          </h1>
          <p className="text-xs text-slate-500">
            Viewing comprehensive damage & maintenance history for Bike <span className="font-semibold text-purple-600">{bikeId}</span>
          </p>
        </div>
      </div>

      {/* Top Metrics Row */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center shrink-0">
              <Wrench className="w-5 h-5 text-purple-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Total Events</p>
              <p className="text-lg font-bold text-slate-800">{filteredList.length}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center shrink-0">
              <ShieldAlert className="w-5 h-5 text-red-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Major / Critical</p>
              <p className="text-lg font-bold text-red-600">{criticalCount}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center shrink-0">
              <DollarSign className="w-5 h-5 text-green-600" />
            </div>
            <div>
              <p className="text-xs text-slate-500">Accumulated Cost</p>
              <p className="text-lg font-bold text-green-600">৳{totalCost.toLocaleString()}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-200 p-4 shadow-sm bg-gradient-to-br from-indigo-50 to-purple-50">
          <div className="flex items-center gap-3">
            <div className="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center shrink-0">
              <Sparkles className="w-5 h-5 text-indigo-600" />
            </div>
            <div>
              <p className="text-xs text-indigo-500">Service Status</p>
              <p className="text-lg font-bold text-indigo-700">Healthy</p>
            </div>
          </div>
        </div>
      </div>

      {/* Main Ledger Content */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden shadow-sm">

        {/* Advanced Filters */}
        <div className="p-4 border-b border-slate-100 bg-slate-50/30">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">

            <div className="flex flex-wrap items-center gap-2">
              <div className="relative">
                <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
                <input
                  type="text"
                  placeholder="Search description or reference..."
                  value={searchQuery}
                  onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }}
                  className="pl-9 pr-4 py-2 border border-slate-200 rounded-lg text-sm w-48 sm:w-64 bg-white focus:outline-none focus:border-slate-400 transition-colors"
                />
              </div>

              <select
                value={typeFilter}
                onChange={(e) => { setTypeFilter(e.target.value); setPage(1); }}
                className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white cursor-pointer font-medium"
              >
                <option value="all">All Types</option>
                <optgroup label="Damage Levels">
                  <option value="damage_all">All Damages</option>
                  <option value="damage_cosmetic">Damage - Cosmetic</option>
                  <option value="damage_minor">Damage - Minor</option>
                  <option value="damage_major">Damage - Major</option>
                  <option value="damage_critical">Damage - Critical</option>
                </optgroup>
                <optgroup label="Maintenance Types">
                  <option value="maintenance_all">All Maintenance</option>
                  <option value="maintenance_service">Service</option>
                  <option value="maintenance_repair">Repair</option>
                  <option value="maintenance_inspection">Inspection</option>
                </optgroup>
              </select>

              <select
                value={statusFilter}
                onChange={(e) => { setStatusFilter(e.target.value); setPage(1); }}
                className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white cursor-pointer"
              >
                <option value="all">All Status</option>
                <option value="reported">Reported</option>
                <option value="in_progress">In Progress</option>
                <option value="parts_ordered">Parts Ordered</option>
                <option value="completed">Completed</option>
                <option value="cancelled">Cancelled</option>
              </select>
            </div>

            <div className="flex flex-wrap items-center gap-2">
              <div className="flex items-center gap-1">
                <input
                  type="date"
                  value={dateFrom}
                  onChange={(e) => { setDateFrom(e.target.value); setPage(1); }}
                  className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                />
                <span className="text-slate-400">to</span>
                <input
                  type="date"
                  value={dateTo}
                  onChange={(e) => { setDateTo(e.target.value); setPage(1); }}
                  className="px-3 py-2 border border-slate-200 rounded-lg text-sm bg-white"
                />
              </div>

              {(dateFrom || dateTo || searchQuery || typeFilter !== 'all' || statusFilter !== 'all') && (
                <button
                  onClick={() => {
                    setSearchQuery('');
                    setTypeFilter('all');
                    setStatusFilter('all');
                    setDateFrom('');
                    setDateTo('');
                    setPage(1);
                  }}
                  className="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 bg-white"
                  title="Reset Filters"
                >
                  <RefreshCw className="w-4 h-4 text-slate-500" />
                </button>
              )}
            </div>

          </div>
        </div>

        {/* Desktop View */}
        <div className="hidden lg:block overflow-x-auto">
          <table className="w-full text-left">
            <thead className="bg-slate-50 border-b border-slate-100">
              <tr>
                <th
                  onClick={() => handleSort('date')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                >
                  Date {sortBy === 'date' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Reference ID
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Type
                </th>
                <th
                  onClick={() => handleSort('severity')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors"
                >
                  Severity {sortBy === 'severity' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Description
                </th>
                <th
                  onClick={() => handleSort('cost')}
                  className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider cursor-pointer hover:bg-slate-100 transition-colors text-right"
                >
                  Cost {sortBy === 'cost' && <span className="text-accent">{sortOrder === 'asc' ? '↑' : '↓'}</span>}
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                  Status
                </th>
                <th className="px-4 py-3 text-xs font-semibold text-slate-500 uppercase tracking-wider text-center">
                  Action
                </th>
              </tr>
            </thead>

            <tbody className="divide-y divide-slate-100">
              {paginatedList.length > 0 ? (
                paginatedList.map(item => (
                  <tr key={item.id} className="hover:bg-slate-50/50 transition-colors">
                    <td className="px-4 py-3.5 text-sm text-slate-600 font-medium">
                      {item.date}
                    </td>
                    <td className="px-4 py-3.5 text-xs font-mono font-semibold text-slate-400">
                      {item.id}
                    </td>
                    <td className="px-4 py-3.5 text-sm text-slate-700 capitalize font-medium">
                      {item.type.replace('_', ' ')}
                    </td>
                    <td className="px-4 py-3.5">
                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-semibold ${severityColors[item.severity]}`}>
                        {item.severity}
                      </span>
                    </td>
                    <td className="px-4 py-3.5 text-sm text-slate-600 max-w-xs">
                      <p className="truncate" title={item.description}>{item.description}</p>
                      {item.partsUsed && item.partsUsed.length > 0 && (
                        <div className="flex flex-wrap gap-1 mt-1">
                          {item.partsUsed.map(p => (
                            <span key={p} className="text-[10px] bg-slate-100 text-slate-600 px-1.5 py-0.2 rounded">
                              {p}
                            </span>
                          ))}
                        </div>
                      )}
                    </td>
                    <td className="px-4 py-3.5 text-sm font-bold text-slate-800 text-right">
                      ৳{item.cost.toLocaleString()}
                    </td>
                    <td className="px-4 py-3.5">
                      <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold capitalize ${statusColors[item.status]}`}>
                        {item.status.replace('_', ' ')}
                      </span>
                    </td>
                    <td className="px-4 py-3.5 text-center">
                      <Link
                        href={`/admin/maintenance/${item.id}`}
                        className="inline-flex p-1.5 hover:bg-slate-100 rounded-lg text-slate-500 hover:text-slate-700 transition-colors"
                      >
                        <Eye className="w-4 h-4" />
                      </Link>
                    </td>
                  </tr>
                ))
              ) : (
                <tr>
                  <td colSpan={8} className="px-4 py-12 text-center text-slate-400">
                    <AlertTriangle className="w-12 h-12 mx-auto mb-2 text-slate-300" />
                    <p className="text-sm font-semibold">No maintenance logs found</p>
                  </td>
                </tr>
              )}
            </tbody>
          </table>
        </div>

        {/* Mobile View */}
        <div className="lg:hidden divide-y divide-slate-100">
          {paginatedList.length > 0 ? (
            paginatedList.map(item => (
              <div key={item.id} className="p-4 hover:bg-slate-50 transition-colors">
                <div className="flex justify-between items-start mb-2">
                  <div>
                    <span className="text-xs text-slate-400 font-mono font-semibold">{item.id}</span>
                    <h4 className="text-sm font-bold text-slate-800 capitalize mt-0.5">
                      {item.type.replace('_', ' ')}
                    </h4>
                  </div>
                  <div className="text-right">
                    <span className="text-sm font-extrabold text-slate-900">৳{item.cost.toLocaleString()}</span>
                    <span className={`block text-[10px] font-semibold mt-1 px-1.5 py-0.5 rounded capitalize ${statusColors[item.status]}`}>
                      {item.status.replace('_', ' ')}
                    </span>
                  </div>
                </div>

                <p className="text-xs text-slate-500 mb-2">{item.description}</p>

                <div className="flex justify-between items-center text-[11px] text-slate-400">
                  <span>{item.date}</span>
                  <Link
                    href={`/admin/maintenance/${item.id}`}
                    className="text-accent font-semibold hover:underline flex items-center gap-0.5"
                  >
                    Details <ArrowRight className="w-3 h-3" />
                  </Link>
                </div>
              </div>
            ))
          ) : (
            <div className="p-8 text-center text-slate-500">
              <AlertTriangle className="w-10 h-10 mx-auto mb-2 text-slate-300" />
              <p>No maintenance logs found</p>
            </div>
          )}
        </div>

        {/* Footer Pagination */}
        {sortedList.length > pageSize && (
          <div className="p-4 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-3 bg-slate-50/10">
            <p className="text-xs sm:text-sm text-slate-500">
              Showing {((page - 1) * pageSize) + 1} to {Math.min(page * pageSize, sortedList.length)} of {sortedList.length} records
            </p>

            <div className="flex items-center gap-1">
              <button
                onClick={() => setPage(p => Math.max(1, p - 1))}
                disabled={page === 1}
                className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50 bg-white"
              >
                <ChevronLeft className="w-4 h-4 text-slate-600" />
              </button>

              {Array.from({ length: totalPages }, (_, i) => i + 1).map(pageNum => (
                <button
                  key={pageNum}
                  onClick={() => setPage(pageNum)}
                  className={`w-8 h-8 rounded-lg text-sm font-semibold transition-colors ${page === pageNum
                      ? 'bg-accent text-white'
                      : 'border border-slate-200 hover:bg-slate-50 bg-white text-slate-600'
                    }`}
                >
                  {pageNum}
                </button>
              ))}

              <button
                onClick={() => setPage(p => Math.min(totalPages, p + 1))}
                disabled={page === totalPages}
                className="p-2 border border-slate-200 rounded-lg disabled:opacity-50 hover:bg-slate-50 bg-white"
              >
                <ChevronRight className="w-4 h-4 text-slate-600" />
              </button>
            </div>
          </div>
        )}

      </div>
    </div>
  );
}