import Link from "next/link";
import {notFound} from "next/navigation";
import {prisma} from "@/lib/db/prisma";
import {Badge} from "@/components/ui/badge";
import {Button} from "@/components/ui/button";
import {Card, CardContent, CardHeader, CardTitle} from "@/components/ui/card";
import {FileSignature, Printer, ArrowLeft} from "lucide-react";
import {ContractActions} from "./contract-actions";
import {PrintButton} from "@/components/ui/print-button";

type ContractDetailPageProps = {
  params: Promise<{tenantSlug: string; contractId: string}>;
};

const statusColors: Record<string, string> = {
  ACTIVE: "bg-green-100 text-green-700",
  COMPLETED: "bg-slate-100 text-slate-600",
  OVERDUE: "bg-red-100 text-red-700",
  CANCELLED: "bg-orange-100 text-orange-700",
  DRAFT: "bg-yellow-100 text-yellow-700"
};

export default async function ContractDetailPage({params}: ContractDetailPageProps) {
  const {tenantSlug, contractId} = await params;

  const tenant = await prisma.tenant.findUnique({where: {slug: tenantSlug}});
  if (!tenant) notFound();

  const contract = await prisma.rentalContract.findFirst({
    where: {id: contractId, tenantId: tenant.id},
    include: {booking: {select: {bookingNumber: true, status: true}}}
  });
  if (!contract) notFound();

  const daysLeft = Math.ceil((new Date(contract.dropoffDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
  const totalDays = Math.ceil((new Date(contract.dropoffDate).getTime() - new Date(contract.pickupDate).getTime()) / (1000 * 60 * 60 * 24));

  return (
    <div className="space-y-6 print:p-8">
      {/* Header */}
      <div className="flex items-start justify-between print:hidden">
        <div>
          <Link href={`/company/${tenantSlug}/contracts`} className="mb-2 inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700">
            <ArrowLeft className="h-4 w-4" />
            Back to Contracts
          </Link>
          <h1 className="text-2xl font-bold text-slate-900">Contract {contract.contractNumber}</h1>
          <p className="mt-1 text-slate-500">Booking #{contract.booking.bookingNumber}</p>
        </div>
        <div className="flex items-center gap-3">
          <Badge className={statusColors[contract.status] ?? ""}>
            {contract.status}
          </Badge>
          <PrintButton />
          <ContractActions contractId={contract.id} tenantSlug={tenantSlug} status={contract.status} />
        </div>
      </div>

      {/* Print Header */}
      <div className="hidden print:block mb-8">
        <div className="flex items-center justify-between border-b pb-4">
          <div>
            <h1 className="text-2xl font-bold">{tenant.name}</h1>
            <p className="text-gray-600">{tenant.email} | {tenant.phone}</p>
          </div>
          <div className="text-right">
            <p className="text-xl font-bold">RENTAL CONTRACT</p>
            <p className="text-gray-600">{contract.contractNumber}</p>
          </div>
        </div>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        {/* Customer Info */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Customer Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {[
              {label: "Full Name", value: contract.customerName},
              {label: "Phone", value: contract.customerPhone},
              {label: "ID Number", value: contract.customerIdNumber},
              {label: "License Number", value: contract.licenseNumber},
              {label: "License Expiry", value: new Date(contract.licenseExpiry).toLocaleDateString()}
            ].map(({label, value}) => (
              <div key={label} className="flex justify-between">
                <span className="text-slate-500">{label}</span>
                <span className="font-medium text-slate-900">{value}</span>
              </div>
            ))}
          </CardContent>
        </Card>

        {/* Vehicle Info */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Vehicle Information</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {[
              {label: "Vehicle", value: contract.vehicleName},
              {label: "Plate Number", value: contract.vehiclePlate},
              {label: "Pickup Location", value: contract.pickupLocation},
              {label: "Dropoff Location", value: contract.dropoffLocation},
              {label: "Insurance", value: contract.insuranceIncluded ? "Included" : "Not Included"}
            ].map(({label, value}) => (
              <div key={label} className="flex justify-between">
                <span className="text-slate-500">{label}</span>
                <span className="font-medium text-slate-900">{value}</span>
              </div>
            ))}
          </CardContent>
        </Card>

        {/* Rental Period */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Rental Period</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {[
              {label: "Pickup Date", value: new Date(contract.pickupDate).toLocaleString()},
              {label: "Dropoff Date", value: new Date(contract.dropoffDate).toLocaleString()},
              {label: "Actual Return", value: contract.actualReturnDate ? new Date(contract.actualReturnDate).toLocaleString() : "—"},
              {label: "Total Days", value: `${totalDays} days`},
              ...(contract.status === "ACTIVE" ? [{label: "Days Remaining", value: daysLeft < 0 ? `${Math.abs(daysLeft)} days overdue` : `${daysLeft} days`}] : [])
            ].map(({label, value}) => (
              <div key={label} className="flex justify-between">
                <span className="text-slate-500">{label}</span>
                <span className={`font-medium ${label === "Days Remaining" && daysLeft < 0 ? "text-red-600" : "text-slate-900"}`}>{value}</span>
              </div>
            ))}
          </CardContent>
        </Card>

        {/* Financial */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Financial Summary</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3 text-sm">
            {[
              {label: "Daily Rate", value: `${tenant.currency} ${Number(contract.dailyRate).toFixed(2)}`},
              {label: "Total Days", value: `${totalDays} days`},
              {label: "Total Amount", value: `${tenant.currency} ${Number(contract.totalAmount).toFixed(2)}`},
              {label: "Deposit", value: `${tenant.currency} ${Number(contract.depositAmount).toFixed(2)}`},
              {label: "Deposit Returned", value: contract.depositReturned ? "Yes" : "No"}
            ].map(({label, value}) => (
              <div key={label} className={`flex justify-between ${label === "Total Amount" ? "border-t pt-2 font-semibold" : ""}`}>
                <span className="text-slate-500">{label}</span>
                <span className="font-medium text-slate-900">{value}</span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      {/* Notes & Terms */}
      {(contract.notes || contract.terms) && (
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Notes & Terms</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4 text-sm">
            {contract.notes && (
              <div>
                <p className="mb-1 font-medium text-slate-700">Notes:</p>
                <p className="text-slate-600 whitespace-pre-wrap">{contract.notes}</p>
              </div>
            )}
            {contract.terms && (
              <div>
                <p className="mb-1 font-medium text-slate-700">Terms & Conditions:</p>
                <p className="text-slate-600 whitespace-pre-wrap">{contract.terms}</p>
              </div>
            )}
          </CardContent>
        </Card>
      )}

      {/* Signature Area (print only) */}
      <div className="hidden print:block mt-12">
        <div className="grid grid-cols-2 gap-16">
          <div>
            <div className="border-t border-gray-400 pt-2">
              <p className="text-sm text-gray-600">Customer Signature</p>
              <p className="mt-1 text-sm">{contract.customerName}</p>
            </div>
          </div>
          <div>
            <div className="border-t border-gray-400 pt-2">
              <p className="text-sm text-gray-600">Company Representative</p>
              <p className="mt-1 text-sm">{tenant.name}</p>
            </div>
          </div>
        </div>
        <p className="mt-8 text-center text-xs text-gray-400">
          Contract signed on {contract.signedAt ? new Date(contract.signedAt).toLocaleDateString() : new Date(contract.createdAt).toLocaleDateString()}
        </p>
      </div>
    </div>
  );
}