"use client";

import { useEffect, useMemo, useRef, useState } from "react";
import { currency } from "@/lib/format";

type WorkerOption = {
  id: string;
  name: string;
  role?: string | null;
  isActive?: boolean;
  defaultDailyRate?: number | string | null;
  defaultHourlyRate?: number | string | null;
  summary?: {
    totalPaid: number;
    totalDays: number;
    averagePerDay: number | null;
  };
};

type LaborFieldsProps = {
  workers: WorkerOption[];
  defaultTransactionKind?: string | null;
  defaultWorkerId?: string | null;
  defaultWorkStartDate?: string | null;
  defaultWorkEndDate?: string | null;
  defaultActualPaidWorkDays?: number | string | null;
  defaultLaborPaymentBasis?: string | null;
  defaultLaborPaymentStatus?: string | null;
  defaultWorkDescription?: string | null;
  defaultWorkArea?: string | null;
};

const basisOptions = [
  ["FIXED_FOR_PERIOD", "Fixed for period"],
  ["DAILY", "Daily"],
  ["HOURLY", "Hourly"],
  ["ADVANCE", "Advance"],
  ["ADJUSTMENT", "Adjustment"]
] as const;

const statusOptions = [
  ["REGULAR_PAYMENT", "Regular payment"],
  ["ADVANCE_PAYMENT", "Advance payment"],
  ["PARTIAL_PAYMENT", "Partial payment"],
  ["FINAL_PAYMENT", "Final payment"],
  ["BONUS", "Bonus"],
  ["CORRECTION_ADJUSTMENT", "Correction/adjustment"]
] as const;

function numeric(value: string | number | null | undefined) {
  const parsed = Number(String(value ?? "").replace(/,/g, ""));
  return Number.isFinite(parsed) ? parsed : 0;
}

function formatInputValue(value: number | string | null | undefined) {
  if (value === null || value === undefined) return "";
  return String(value);
}

function simpleName(value: string) {
  return value.toLowerCase().replace(/[^a-z0-9]+/g, "");
}

export function LaborFields({
  workers,
  defaultTransactionKind = "STANDARD",
  defaultWorkerId,
  defaultWorkStartDate,
  defaultWorkEndDate,
  defaultActualPaidWorkDays,
  defaultLaborPaymentBasis = "FIXED_FOR_PERIOD",
  defaultLaborPaymentStatus = "REGULAR_PAYMENT",
  defaultWorkDescription,
  defaultWorkArea
}: LaborFieldsProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const [transactionKind, setTransactionKind] = useState(defaultTransactionKind ?? "STANDARD");
  const [workerId, setWorkerId] = useState(defaultWorkerId ?? "");
  const [newWorkerName, setNewWorkerName] = useState("");
  const [paidDays, setPaidDays] = useState(formatInputValue(defaultActualPaidWorkDays));
  const [finalCost, setFinalCost] = useState(0);
  const isLabor = transactionKind === "LABOR_COST";

  useEffect(() => {
    const form = containerRef.current?.closest("form");
    if (!form) return;
    const amountInput = form.elements.namedItem("amount") as HTMLInputElement | null;
    const discountInput = form.elements.namedItem("discount") as HTMLInputElement | null;
    const finalInput = form.elements.namedItem("finalCost") as HTMLInputElement | null;
    const update = () => {
      const directFinal = numeric(finalInput?.value);
      if (finalInput?.value) {
        setFinalCost(directFinal);
        return;
      }
      setFinalCost(Math.max(0, numeric(amountInput?.value) - numeric(discountInput?.value)));
    };
    update();
    amountInput?.addEventListener("input", update);
    discountInput?.addEventListener("input", update);
    finalInput?.addEventListener("input", update);
    return () => {
      amountInput?.removeEventListener("input", update);
      discountInput?.removeEventListener("input", update);
      finalInput?.removeEventListener("input", update);
    };
  }, []);

  const selectedWorker = workers.find((worker) => worker.id === workerId);
  const paidDayNumber = numeric(paidDays);
  const average = paidDayNumber > 0 ? finalCost / paidDayNumber : null;
  const duplicateWarning = useMemo(() => {
    const nextName = simpleName(newWorkerName);
    if (nextName.length < 3) return "";
    const match = workers.find((worker) => {
      const existing = simpleName(worker.name);
      return existing === nextName || existing.includes(nextName) || nextName.includes(existing);
    });
    return match ? `A similar worker already exists: ${match.name}. You can still create a new worker if this is a different person.` : "";
  }, [newWorkerName, workers]);

  return (
    <div ref={containerRef} className="grid gap-4 rounded-md border border-line bg-white p-3">
      <label className="grid gap-2">
        <span className="label">Transaction type</span>
        <select className="field" name="transactionKind" value={transactionKind} onChange={(event) => setTransactionKind(event.target.value)}>
          <option value="STANDARD">Standard Expense</option>
          <option value="LABOR_COST">Labor Cost / Worker Payment</option>
        </select>
      </label>

      {isLabor ? (
        <div className="grid gap-4 border-t border-line pt-4">
          <div className="rounded-md border border-blue-100 bg-blue-50 px-3 py-2 text-xs font-medium text-blue-800">
            Enter the actual paid work days. The app does not calculate labor pay from calendar days or weekdays.
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <label className="grid gap-2">
              <span className="label">Worker</span>
              <select className="field" name="workerId" value={workerId} onChange={(event) => setWorkerId(event.target.value)}>
                <option value="">Create/select worker...</option>
                {workers.map((worker) => (
                  <option key={worker.id} value={worker.id}>
                    {worker.name}{worker.role ? ` - ${worker.role}` : ""}{worker.isActive === false ? " (inactive)" : ""}
                  </option>
                ))}
              </select>
            </label>
            <label className="grid gap-2">
              <span className="label">New worker name</span>
              <input className="field" name="newWorkerName" value={newWorkerName} onChange={(event) => setNewWorkerName(event.target.value)} placeholder="Only if worker is not listed" />
            </label>
            <label className="grid gap-2">
              <span className="label">New worker role/skill</span>
              <input className="field" name="newWorkerRole" placeholder="Painter, helper, electrician..." />
            </label>
            <label className="grid gap-2">
              <span className="label">New worker phone</span>
              <input className="field" name="newWorkerPhone" />
            </label>
          </div>
          {duplicateWarning ? <p className="rounded-md border border-amber-200 bg-amber-50 px-3 py-2 text-xs font-medium text-amber-800">{duplicateWarning}</p> : null}

          {selectedWorker?.summary ? (
            <p className="rounded-md border border-line bg-slate-50 px-3 py-2 text-sm text-slate-700">
              Current project total for this worker: <strong>{currency(selectedWorker.summary.totalPaid)}</strong> over <strong>{selectedWorker.summary.totalDays}</strong> paid work days = <strong>{selectedWorker.summary.averagePerDay === null ? "-" : `${currency(selectedWorker.summary.averagePerDay)}/day`}</strong>
            </p>
          ) : null}

          <div className="grid gap-4 md:grid-cols-3">
            <label className="grid gap-2">
              <span className="label">Work start date</span>
              <input className="field" name="workStartDate" type="date" defaultValue={defaultWorkStartDate ?? ""} required={isLabor} />
            </label>
            <label className="grid gap-2">
              <span className="label">Work end date</span>
              <input className="field" name="workEndDate" type="date" defaultValue={defaultWorkEndDate ?? ""} />
            </label>
            <label className="grid gap-2">
              <span className="label">Actual paid work days</span>
              <input className="field" name="actualPaidWorkDays" type="number" step="0.01" min="0.01" value={paidDays} onChange={(event) => setPaidDays(event.target.value)} required={isLabor} />
            </label>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <label className="grid gap-2">
              <span className="label">Payment basis</span>
              <select className="field" name="laborPaymentBasis" defaultValue={defaultLaborPaymentBasis ?? "FIXED_FOR_PERIOD"}>
                {basisOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
              </select>
            </label>
            <label className="grid gap-2">
              <span className="label">Labor payment type/status</span>
              <select className="field" name="laborPaymentStatus" defaultValue={defaultLaborPaymentStatus ?? "REGULAR_PAYMENT"}>
                {statusOptions.map(([value, label]) => <option key={value} value={value}>{label}</option>)}
              </select>
            </label>
          </div>

          <div className="grid gap-4 md:grid-cols-2">
            <label className="grid gap-2">
              <span className="label">Work description</span>
              <input className="field" name="workDescription" defaultValue={defaultWorkDescription ?? ""} />
            </label>
            <label className="grid gap-2">
              <span className="label">Work area / unit / location</span>
              <input className="field" name="workArea" defaultValue={defaultWorkArea ?? ""} />
            </label>
          </div>

          <p className="rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-semibold text-emerald-800">
            This payment: {currency(finalCost)} over {paidDayNumber > 0 ? paidDayNumber : "-"} paid work days = {average === null ? "-" : `${currency(average)}/day`}
          </p>
        </div>
      ) : null}
    </div>
  );
}