import React, { useState } from "react";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Shield, Download, Upload, Save, AlertCircle } from "lucide-react";

export default function COIViewer({ vendor, onClose }) {
  const coverageLines = [
    {
      name: "General Liability",
      expires: "11/20/2025",
      status: "Non-Compliant",
      statusColor: "bg-red-100 text-red-700"
    },
    {
      name: "Automobile Liability",
      expires: "03/30/2025",
      status: "Non-Compliant",
      statusColor: "bg-red-100 text-red-700"
    },
    {
      name: "Workers Compensation",
      expires: "11/15/2025",
      status: "Non-Compliant",
      statusColor: "bg-red-100 text-red-700"
    },
    {
      name: "Property",
      expires: "",
      status: "Non-Compliant",
      statusColor: "bg-red-100 text-red-700"
    }
  ];

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between pb-4 border-b border-slate-200">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <Shield className="w-5 h-5 text-[#0A39DF]" />
            <h3 className="font-bold text-lg text-[#1C323E]">Policy & Agent</h3>
          </div>
          <p className="text-xs text-slate-500">Last Reviewed: 07/25/2025, 12:24 PM</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <Upload className="w-4 h-4 mr-2" />
            Upload COI
          </Button>
          <Button variant="outline" size="sm">
            <Download className="w-4 h-4 mr-2" />
            Download
          </Button>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Lines Covered by Agent */}
        <Card className="border-slate-200">
          <CardHeader className="bg-gradient-to-br from-blue-50 to-white border-b border-slate-100">
            <CardTitle className="text-base text-[#1C323E]">Lines Covered by Agent</CardTitle>
            <p className="text-sm text-blue-600 mt-2">
              Legendary Event Staffing & Entertainment, LLC (Vendor as an Agent)
            </p>
            <p className="text-xs text-slate-500 mt-1">Uploaded 07/23/2025, 01:20 PM</p>
          </CardHeader>
          <CardContent className="p-6 space-y-4">
            {coverageLines.map((line, idx) => (
              <div key={idx} className="flex items-center justify-between p-3 bg-slate-50 rounded-lg">
                <div>
                  <p className="font-semibold text-[#1C323E] text-sm">{line.name}</p>
                  {line.expires && (
                    <p className="text-xs text-slate-600 mt-1">Expires {line.expires}</p>
                  )}
                </div>
                <Badge className={line.statusColor}>
                  {line.status}
                </Badge>
              </div>
            ))}

            <Button variant="link" className="text-blue-600 text-sm p-0 h-auto mt-4">
              Show Iliana contact info
            </Button>
          </CardContent>
        </Card>

        {/* Non-Compliant Notes */}
        <Card className="border-slate-200">
          <CardHeader className="bg-gradient-to-br from-amber-50 to-white border-b border-slate-100">
            <CardTitle className="text-base text-[#1C323E] flex items-center gap-2">
              <AlertCircle className="w-5 h-5 text-amber-600" />
              Non-Compliant Notes
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6 space-y-6">
            {/* General Liability */}
            <div>
              <h4 className="font-semibold text-[#1C323E] mb-3">General Liability</h4>
              <ul className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Please confirm aggregate limit applies on a per location basis on the certificate and/or by uploading additional documentation.</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Waiver of Subrogation</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Primary and Non-Contributory</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Confirm on certificate Contractual Liability is not excluded.</span>
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Confirm on the certificate that severability of interest is included.</span>
                </li>
              </ul>
            </div>

            {/* Property */}
            <div>
              <h4 className="font-semibold text-[#1C323E] mb-3">Property</h4>
              <ul className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Please submit proof of coverage.</span>
                </li>
              </ul>
            </div>

            {/* Additional Coverage */}
            <div>
              <h4 className="font-semibold text-[#1C323E] mb-3">Additional Coverage</h4>
              <ul className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Waiver of Subrogation applies to: South Bay Construction and Development I, LLC and South Bay Development Company, and their Employees, Agents</span>
                </li>
              </ul>
            </div>

            {/* Automobile Liability */}
            <div>
              <h4 className="font-semibold text-[#1C323E] mb-3">Automobile Liability</h4>
              <ul className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Waiver of Subrogation</span>
                </li>
              </ul>
            </div>

            {/* Workers Compensation */}
            <div>
              <h4 className="font-semibold text-[#1C323E] mb-3">Workers Compensation</h4>
              <ul className="space-y-2 text-sm text-slate-700">
                <li className="flex items-start gap-2">
                  <span className="text-amber-600 mt-1">•</span>
                  <span>Waiver of Subrogation</span>
                </li>
              </ul>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Actions */}
      <div className="flex justify-between items-center pt-4 border-t border-slate-200">
        <div className="flex items-center gap-2">
          <Badge variant="outline" className="bg-amber-50 text-amber-700 border-amber-200">
            <AlertCircle className="w-3 h-3 mr-1" />
            4 Items Non-Compliant
          </Badge>
        </div>
        <div className="flex gap-3">
          <Button variant="outline" onClick={onClose}>
            Cancel
          </Button>
          <Button className="bg-[#0A39DF] hover:bg-[#0A39DF]/90">
            <Save className="w-4 h-4 mr-2" />
            Save & Send for Review
          </Button>
        </div>
      </div>
    </div>
  );
}