import type { ReactNode } from "react";
import { Calendar, MapPin } from "lucide-react";

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button";

import { consignments } from "../consignments/consignments.mock";
import type { ShipmentMode, ShipmentStatus } from "./shipments.mock";

export interface ShipmentFormData {
  consignmentId?: number;
  consignmentReference?: string;
  originStation?: string;
  destinationStation?: string;
  mode?: ShipmentMode;
  status?: ShipmentStatus;
  currentLocation?: string;
  eta?: string;
}

export interface NewShipmentPageProps {
  mode?: "create" | "edit";
  shipment?: ShipmentFormData;
  children?: ReactNode;
}

const selectClass =
  "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm text-slate-700 shadow-xs outline-none transition hover:border-slate-300 focus:border-[#10B981]/50 focus:ring-2 focus:ring-[#10B981]/20";

export default function NewShipmentPage({
  mode = "create",
  shipment,
  children,
}: NewShipmentPageProps = {}) {
  const isEdit = mode === "edit";
  const title = isEdit ? "Edit Shipment" : "New Shipment";
  const description = isEdit
    ? "Update shipment tracking information."
    : "Create a new shipment for real-time tracking.";
  const submitLabel = isEdit ? "Save Changes" : "Create Shipment";

  return (
    <Dialog>
      <DialogTrigger asChild>
        {children ?? <Button>{isEdit ? "Edit" : "New Shipment"}</Button>}
      </DialogTrigger>

      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-3xl rounded-3xl">
        <DialogHeader>
          <DialogTitle className="text-2xl font-bold">{title}</DialogTitle>
          <DialogDescription>{description}</DialogDescription>
        </DialogHeader>

        <div className="grid gap-5 py-4 md:grid-cols-2">
          {/* Consignment */}
          <div className="space-y-2 md:col-span-2">
            <Label>Consignment *</Label>
            <select
              defaultValue={shipment?.consignmentId ?? ""}
              className={selectClass}
            >
              <option value="" disabled>
                Select consignment
              </option>
              {consignments.map((c) => (
                <option key={c.id} value={c.id}>
                  {c.trackingNumber} — {c.customer} ({c.originStation} →{" "}
                  {c.destinationStation})
                </option>
              ))}
            </select>
            <p className="text-xs text-slate-500">
              Origin and destination auto-fill from the linked consignment.
            </p>
          </div>

          {/* Status */}
          <div className="space-y-2">
            <Label>Status</Label>
            <select
              defaultValue={shipment?.status ?? "In Transit"}
              className={selectClass}
            >
              <option>In Transit</option>
              <option>Delivered</option>
              <option>Delayed</option>
            </select>
          </div>

          {/* Mode */}
          <div className="space-y-2">
            <Label>Transport Mode</Label>
            <select
              defaultValue={shipment?.mode ?? "rail"}
              className={selectClass}
            >
              <option value="rail">Rail</option>
              <option value="truck">Truck</option>
              <option value="multimodal">Multimodal</option>
            </select>
          </div>

          {/* Origin */}
          <div className="space-y-2">
            <Label>Origin Station</Label>
            <div className="relative">
              <MapPin className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
              <Input
                defaultValue={shipment?.originStation ?? ""}
                placeholder="Auto-filled from consignment"
                className="pl-10"
              />
            </div>
          </div>

          {/* Destination */}
          <div className="space-y-2">
            <Label>Destination Station</Label>
            <div className="relative">
              <MapPin className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
              <Input
                defaultValue={shipment?.destinationStation ?? ""}
                placeholder="Auto-filled from consignment"
                className="pl-10"
              />
            </div>
          </div>

          {/* ETA */}
          <div className="space-y-2">
            <Label>Estimated Arrival</Label>
            <div className="relative">
              <Calendar className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
              <Input
                type="date"
                defaultValue={shipment?.eta ?? ""}
                className="pl-10"
              />
            </div>
          </div>

          {/* Current Location */}
          <div className="space-y-2">
            <Label>Current Location</Label>
            <div className="relative">
              <MapPin className="absolute left-3 top-3 h-4 w-4 text-slate-400" />
              <Input
                defaultValue={shipment?.currentLocation ?? ""}
                placeholder="e.g. Dire Dawa Yard"
                className="pl-10"
              />
            </div>
          </div>
        </div>

        <div className="flex justify-end gap-3">
          <Button variant="outline">Cancel</Button>
          <Button className="bg-[#10B981] text-white hover:bg-[#10B981]/90">
            {submitLabel}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
}
