"use client";

import { useEffect, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { priorityLabels, statusLabels } from "@/components/repairs/RepairStatusBadge";
import { api } from "@/lib/api";
import type { Customer } from "@/types/customer";
import type { Repair, RepairPayload, RepairPriority, RepairSource, RepairStatus } from "@/types/repair";

type Props = {
  open: boolean;
  repair?: Repair | null;
  pending: boolean;
  serverError: string;
  onOpenChange: (open: boolean) => void;
  onSubmit: (payload: RepairPayload) => void;
};

const initialPayload: RepairPayload = {
  customer_id: null,
  contact_id: null,
  status: "new",
  priority: "normal",
  source: "manual",
  source_reference: null,
  customer_name: "",
  customer_email: null,
  customer_phone: "",
  device_manufacturer: "",
  device_model: "",
  device_serial_number: null,
  device_type: "",
  accessories: "",
  fault_description: "",
  previous_work: "",
  device_opened: false,
  intake_notes: "",
  diagnosis_notes: "",
  repair_notes: "",
  estimate_notes: "",
  estimated_cost_cents: null,
};

function payloadFromRepair(repair?: Repair | null): RepairPayload {
  if (!repair) {
    return initialPayload;
  }
  return {
    customer_id: repair.customer_id,
    contact_id: repair.contact_id,
    status: repair.status,
    priority: repair.priority,
    source: repair.source,
    source_reference: repair.source_reference,
    customer_name: repair.customer_name,
    customer_email: repair.customer_email || null,
    customer_phone: repair.customer_phone,
    device_manufacturer: repair.device_manufacturer,
    device_model: repair.device_model,
    device_serial_number: repair.device_serial_number,
    device_type: repair.device_type,
    accessories: repair.accessories,
    fault_description: repair.fault_description,
    previous_work: repair.previous_work,
    device_opened: repair.device_opened,
    intake_notes: repair.intake_notes,
    diagnosis_notes: repair.diagnosis_notes,
    repair_notes: repair.repair_notes,
    estimate_notes: repair.estimate_notes,
    estimated_cost_cents: repair.estimated_cost_cents,
  };
}

export default function RepairFormDialog({ open, repair, pending, serverError, onOpenChange, onSubmit }: Props) {
  const [payload, setPayload] = useState<RepairPayload>(payloadFromRepair(repair));
  const [clientError, setClientError] = useState("");
  const [customers, setCustomers] = useState<Customer[]>([]);

  useEffect(() => {
    if (!open) {
      return;
    }

    let active = true;

    async function loadCustomers() {
      try {
        const response = await api.get<Customer[]>("/customers");
        if (active) {
          setCustomers(response.data);
        }
      } catch {
        if (active) {
          setCustomers([]);
        }
      }
    }

    void loadCustomers();
    return () => {
      active = false;
    };
  }, [open]);

  function update<K extends keyof RepairPayload>(key: K, value: RepairPayload[K]) {
    setPayload((current) => ({ ...current, [key]: value }));
  }

  function submit() {
    if (!payload.customer_name.trim() || !payload.device_manufacturer.trim() || !payload.device_model.trim() || !payload.fault_description.trim()) {
      setClientError("Bitte Kundennamen, Hersteller, Modell und Fehlerbeschreibung ausfüllen.");
      return;
    }
    setClientError("");
    onSubmit(payload);
  }

  function selectCustomer(customerId: string) {
    if (!customerId) {
      update("customer_id", null);
      return;
    }
    const customer = customers.find((item) => String(item.id) === customerId);
    if (!customer) {
      return;
    }
    setPayload((current) => ({
      ...current,
      customer_id: customer.id,
      customer_name: customer.company_name,
      customer_email: customer.email || current.customer_email,
      customer_phone: customer.phone || current.customer_phone,
    }));
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-4xl">
        <DialogHeader>
          <DialogTitle>{repair ? "Reparatur bearbeiten" : "Reparatur anlegen"}</DialogTitle>
          <DialogDescription>Erfasse Kundendaten, Gerätedaten und Werkstattnotizen.</DialogDescription>
        </DialogHeader>

        <div className="grid gap-5">
          <section className="grid gap-3">
            <h3 className="font-semibold text-slate-950">Kunde</h3>
            <label className="grid gap-1 text-sm">Bestehender Kunde
              <select className="h-8 rounded-lg border px-2 text-sm" value={payload.customer_id ?? ""} onChange={(event) => selectCustomer(event.target.value)}>
                <option value="">Manuelle Kundendaten</option>
                {customers.map((customer) => <option key={customer.id} value={customer.id}>{customer.company_name}</option>)}
              </select>
            </label>
            <div className="grid gap-3 md:grid-cols-3">
              <label className="grid gap-1 text-sm">Name<Input value={payload.customer_name} onChange={(event) => update("customer_name", event.target.value)} /></label>
              <label className="grid gap-1 text-sm">E-Mail<Input type="email" value={payload.customer_email ?? ""} onChange={(event) => update("customer_email", event.target.value || null)} /></label>
              <label className="grid gap-1 text-sm">Telefon<Input value={payload.customer_phone} onChange={(event) => update("customer_phone", event.target.value)} /></label>
            </div>
          </section>

          <section className="grid gap-3">
            <h3 className="font-semibold text-slate-950">Gerät</h3>
            <div className="grid gap-3 md:grid-cols-4">
              <label className="grid gap-1 text-sm">Hersteller<Input value={payload.device_manufacturer} onChange={(event) => update("device_manufacturer", event.target.value)} /></label>
              <label className="grid gap-1 text-sm">Modell<Input value={payload.device_model} onChange={(event) => update("device_model", event.target.value)} /></label>
              <label className="grid gap-1 text-sm">Seriennummer<Input value={payload.device_serial_number ?? ""} onChange={(event) => update("device_serial_number", event.target.value || null)} /></label>
              <label className="grid gap-1 text-sm">Gerätetyp<Input value={payload.device_type} onChange={(event) => update("device_type", event.target.value)} /></label>
            </div>
          </section>

          <section className="grid gap-3">
            <h3 className="font-semibold text-slate-950">Vorgang</h3>
            <div className="grid gap-3 md:grid-cols-3">
              <label className="grid gap-1 text-sm">Status<select className="h-8 rounded-lg border px-2 text-sm" value={payload.status} onChange={(event) => update("status", event.target.value as RepairStatus)}>
                {(["new", "accepted", "diagnosis", "estimate", "waiting_for_customer", "approved", "repair", "final_test", "ready_for_pickup", "shipped", "completed", "cancelled"] as RepairStatus[]).map((status) => <option key={status} value={status}>{statusLabels[status]}</option>)}
              </select></label>
              <label className="grid gap-1 text-sm">Priorität<select className="h-8 rounded-lg border px-2 text-sm" value={payload.priority} onChange={(event) => update("priority", event.target.value as RepairPriority)}>
                {(["low", "normal", "high", "urgent"] as RepairPriority[]).map((priority) => <option key={priority} value={priority}>{priorityLabels[priority]}</option>)}
              </select></label>
              <label className="grid gap-1 text-sm">Quelle<select className="h-8 rounded-lg border px-2 text-sm" value={payload.source} onChange={(event) => update("source", event.target.value as RepairSource)}>
                {["manual", "website", "customer_portal", "email", "phone"].map((source) => <option key={source} value={source}>{source}</option>)}
              </select></label>
            </div>
            <label className="grid gap-1 text-sm">Quellreferenz<Input value={payload.source_reference ?? ""} onChange={(event) => update("source_reference", event.target.value || null)} /></label>
          </section>

          <section className="grid gap-3">
            <h3 className="font-semibold text-slate-950">Beschreibung</h3>
            <label className="grid gap-1 text-sm">Fehlerbeschreibung<textarea className="min-h-24 rounded-lg border p-2 text-sm" value={payload.fault_description} onChange={(event) => update("fault_description", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Zubehör<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.accessories} onChange={(event) => update("accessories", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Vorarbeiten<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.previous_work} onChange={(event) => update("previous_work", event.target.value)} /></label>
            <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={payload.device_opened} onChange={(event) => update("device_opened", event.target.checked)} /> Gerät wurde bereits geöffnet</label>
          </section>

          <section className="grid gap-3">
            <h3 className="font-semibold text-slate-950">Werkstattnotizen</h3>
            <label className="grid gap-1 text-sm">Annahme<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.intake_notes} onChange={(event) => update("intake_notes", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Diagnose<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.diagnosis_notes} onChange={(event) => update("diagnosis_notes", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Reparatur<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.repair_notes} onChange={(event) => update("repair_notes", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Kostenschätzung<textarea className="min-h-20 rounded-lg border p-2 text-sm" value={payload.estimate_notes} onChange={(event) => update("estimate_notes", event.target.value)} /></label>
            <label className="grid gap-1 text-sm">Geschätzte Kosten in Cent<Input type="number" min={0} value={payload.estimated_cost_cents ?? ""} onChange={(event) => update("estimated_cost_cents", event.target.value ? Number(event.target.value) : null)} /></label>
          </section>
        </div>

        {(clientError || serverError) && <p className="text-sm text-red-600">{clientError || serverError}</p>}

        <DialogFooter>
          <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={pending}>Abbrechen</Button>
          <Button type="button" onClick={submit} disabled={pending}>{pending ? "Speichert..." : "Speichern"}</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}