import { DriverRecord } from '../../../types/driver';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../ui/dialog';
import { Card } from '../../ui/card';
import { Badge } from '../../ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs';
import { TrainingRecordManagement } from './TrainingRecordManagement';
import { ViolationRecordManagement } from './ViolationRecordManagement';

interface DriverDetailsProps {
  open: boolean;
  onClose: () => void;
  driver: DriverRecord | null;
  onReload: () => void;
}

export function DriverDetails({ open, onClose, driver, onReload }: DriverDetailsProps) {
  if (!driver) return null;

  const handleUpdateTrainingRecords = (records: any[]) => {
    const stored = localStorage.getItem('smart_agriculture_drivers');
    if (stored) {
      const drivers = JSON.parse(stored);
      const updated = drivers.map((d: DriverRecord) =>
        d.id === driver.id ? { ...d, trainingRecords: records } : d
      );
      localStorage.setItem('smart_agriculture_drivers', JSON.stringify(updated));
      onReload();
    }
  };

  const handleUpdateViolationRecords = (records: any[]) => {
    const stored = localStorage.getItem('smart_agriculture_drivers');
    if (stored) {
      const drivers = JSON.parse(stored);
      const updated = drivers.map((d: DriverRecord) =>
        d.id === driver.id ? { ...d, violationRecords: records } : d
      );
      localStorage.setItem('smart_agriculture_drivers', JSON.stringify(updated));
      onReload();
    }
  };

  const InfoRow = ({ label, value }: { label: string; value: any }) => (
    <div className="flex justify-between py-2 border-b">
      <span className="text-muted-foreground">{label}</span>
      <span>{value || '-'}</span>
    </div>
  );

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>驾驶员详情</DialogTitle>
          <DialogDescription className="sr-only">
            查看驾驶员的详细信息
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4">
          <Card className="p-6">
            <div className="flex items-start justify-between mb-4">
              <div>
                <h2>{driver.name}</h2>
                <p className="text-muted-foreground">{driver.phone}</p>
              </div>
              <Badge>{driver.status}</Badge>
            </div>
          </Card>

          <Tabs defaultValue="basic">
            <TabsList>
              <TabsTrigger value="basic">基本信息</TabsTrigger>
              <TabsTrigger value="license">证件信息</TabsTrigger>
              <TabsTrigger value="work">工作信息</TabsTrigger>
              <TabsTrigger value="training">培训记录</TabsTrigger>
              <TabsTrigger value="violation">违规记录</TabsTrigger>
            </TabsList>

            <TabsContent value="basic">
              <Card className="p-6">
                <div className="grid grid-cols-2 gap-x-8">
                  <InfoRow label="姓名" value={driver.name} />
                  <InfoRow label="性别" value={driver.gender} />
                  <InfoRow label="出生日期" value={driver.birthDate} />
                  <InfoRow label="联系电话" value={driver.phone} />
                  <InfoRow label="电子邮箱" value={driver.email} />
                  <InfoRow label="身份证号" value={driver.idCard} />
                  <InfoRow label="所属部门" value={driver.department} />
                  <InfoRow label="入职日期" value={driver.entryDate} />
                  <InfoRow label="创建时间" value={new Date(driver.createdAt).toLocaleString('zh-CN')} />
                  <InfoRow label="更新时间" value={new Date(driver.updatedAt).toLocaleString('zh-CN')} />
                  <InfoRow label="创建人" value={driver.createdBy} />
                </div>
                {driver.address && (
                  <div className="mt-4">
                    <InfoRow label="联系地址" value={driver.address} />
                  </div>
                )}
              </Card>
            </TabsContent>

            <TabsContent value="license">
              <Card className="p-6">
                <h4 className="mb-4">驾驶证信息</h4>
                <div className="grid grid-cols-2 gap-x-8 mb-6">
                  <InfoRow label="驾驶证号" value={driver.driverLicense.licenseNumber} />
                  <InfoRow label="准驾车型" value={driver.driverLicense.licenseType} />
                  <InfoRow label="发证日期" value={driver.driverLicense.issueDate} />
                  <InfoRow label="有效期至" value={driver.driverLicense.expiryDate} />
                </div>

                {driver.qualification && (
                  <>
                    <h4 className="mb-4 mt-6">从业资格证</h4>
                    <div className="grid grid-cols-2 gap-x-8">
                      <InfoRow label="证书编号" value={driver.qualification.certificateNumber} />
                      <InfoRow label="发证日期" value={driver.qualification.issueDate} />
                      <InfoRow label="有效期至" value={driver.qualification.expiryDate} />
                    </div>
                  </>
                )}
              </Card>
            </TabsContent>

            <TabsContent value="work">
              <Card className="p-6">
                <h4 className="mb-4">工作信息</h4>
                <div className="grid grid-cols-2 gap-x-8">
                  <InfoRow label="在岗状态" value={driver.status} />
                  <InfoRow label="所属部门" value={driver.department} />
                  <InfoRow label="入职日期" value={driver.entryDate} />
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="training">
              <TrainingRecordManagement
                driverId={driver.id}
                records={driver.trainingRecords}
                onUpdate={handleUpdateTrainingRecords}
              />
            </TabsContent>

            <TabsContent value="violation">
              <ViolationRecordManagement
                driverId={driver.id}
                records={driver.violationRecords}
                onUpdate={handleUpdateViolationRecords}
              />
            </TabsContent>
          </Tabs>
        </div>
      </DialogContent>
    </Dialog>
  );
}
