"use client";

import { useState, useCallback } from "react";
import { ArrowLeft, Plus, Trash2, Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Select } from "@/components/ui/select";
import { Card, CardContent } from "@/components/ui/card";
import {
  createInvoice,
  updateInvoiceStatus,
  fetchInvoices,
  type InvoiceRow,
} from "@/lib/supabase/invoicing-actions";
import { centsToDecimal, decimalToCents } from "@/lib/supabase/invoicing-types";

interface LineItem {
  description: string;
  quantity: string;
  unit_price_cents: number;
  tax_rate: string;
}

const CURRENCIES = ["AUD", "USD", "EUR", "GBP", "NZD", "CAD"];

function todayISO(): string {
  return new Date().toISOString().split("T")[0];
}

function dueDateISO(): string {
  const d = new Date();
  d.setDate(d.getDate() + 30);
  return d.toISOString().split("T")[0];
}

function computeLineTotal(item: LineItem): number {
  const qty = parseFloat(item.quantity) || 0;
  return Math.round(qty * item.unit_price_cents);
}

export default function InvoicesNewView({
  onBack,
  onCreated,
}: {
  onBack: () => void;
  onCreated: (invoiceId: string) => void;
}) {
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const [clientName, setClientName] = useState("");
  const [clientEmail, setClientEmail] = useState("");
  const [clientAddress, setClientAddress] = useState("");
  const [issueDate, setIssueDate] = useState(todayISO);
  const [dueDate, setDueDate] = useState(dueDateISO);
  const [currency, setCurrency] = useState("AUD");
  const [notes, setNotes] = useState("");

  const [lineItems, setLineItems] = useState<LineItem[]>([
    { description: "", quantity: "1", unit_price_cents: 0, tax_rate: "10" },
  ]);

  const updateLineItem = useCallback(
    (index: number, field: keyof LineItem, value: string | number) => {
      setLineItems((prev) => {
        const next = [...prev];
        next[index] = { ...next[index], [field]: value };
        return next;
      });
    },
    []
  );

  const addLineItem = useCallback(() => {
    setLineItems((prev) => [
      ...prev,
      { description: "", quantity: "1", unit_price_cents: 0, tax_rate: "10" },
    ]);
  }, []);

  const removeLineItem = useCallback((index: number) => {
    setLineItems((prev) => prev.filter((_, i) => i !== index));
  }, []);

  const subtotalCents = lineItems.reduce((sum, item) => sum + computeLineTotal(item), 0);
  const taxTotalCents = lineItems.reduce((sum, item) => {
    const lineTotal = computeLineTotal(item);
    const rate = parseFloat(item.tax_rate) || 0;
    return sum + Math.round((lineTotal * rate) / 100);
  }, 0);
  const totalCents = subtotalCents + taxTotalCents;

  async function handleSubmit(action: "draft" | "sent") {
    setError(null);

    if (!clientName.trim()) { setError("Client name is required"); return; }
    if (!dueDate) { setError("Due date is required"); return; }
    if (lineItems.some((item) => !item.description.trim())) { setError("All line items must have a description"); return; }
    if (lineItems.some((item) => item.unit_price_cents <= 0)) { setError("All line items must have a unit price greater than 0"); return; }

    setSaving(true);

    try {
      const result = await createInvoice({
        client_name: clientName.trim(),
        client_email: clientEmail.trim() || undefined,
        client_address: clientAddress.trim() || undefined,
        issue_date: issueDate,
        due_date: dueDate,
        currency,
        notes: notes.trim() || undefined,
        line_items: lineItems.map((item, i) => ({
          description: item.description.trim(),
          quantity: item.quantity,
          unit_price_cents: item.unit_price_cents,
          tax_rate: item.tax_rate,
          sort_order: i,
        })),
      });

      if (!result.success || !result.invoiceId) {
        setError(result.error || "Failed to create invoice");
        return;
      }

      if (action === "sent") {
        await updateInvoiceStatus(result.invoiceId, "sent");
      }

      onCreated(result.invoiceId);
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <button
          onClick={onBack}
          className="p-2 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer"
        >
          <ArrowLeft className="w-5 h-5 text-gray-500" />
        </button>
        <div>
          <h1 className="text-3xl font-serif font-bold text-gray-900">New Invoice</h1>
          <p className="text-gray-500 mt-1">Create a new invoice for your client</p>
        </div>
      </div>

      {/* Error Banner */}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
          {error}
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Form */}
        <div className="lg:col-span-2 space-y-6">
          {/* Client Details */}
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-lg font-semibold text-gray-900">Client Details</h2>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="sm:col-span-2">
                  <Label htmlFor="clientName">Client Name *</Label>
                  <Input
                    id="clientName"
                    value={clientName}
                    onChange={(e) => setClientName(e.target.value)}
                    placeholder="e.g. Acme Corp"
                    className="mt-1"
                  />
                </div>

                <div>
                  <Label htmlFor="clientEmail">Client Email</Label>
                  <Input
                    id="clientEmail"
                    type="email"
                    value={clientEmail}
                    onChange={(e) => setClientEmail(e.target.value)}
                    placeholder="billing@acme.com"
                    className="mt-1"
                  />
                </div>

                <div className="sm:col-span-2">
                  <Label htmlFor="clientAddress">Client Address</Label>
                  <Textarea
                    id="clientAddress"
                    value={clientAddress}
                    onChange={(e) => setClientAddress(e.target.value)}
                    placeholder="123 Business St, Sydney NSW 2000"
                    className="mt-1"
                    rows={2}
                  />
                </div>
              </div>
            </CardContent>
          </Card>

          {/* Line Items */}
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <div className="flex items-center justify-between">
                <h2 className="text-lg font-semibold text-gray-900">Line Items</h2>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={addLineItem}
                  className="gap-1 cursor-pointer"
                >
                  <Plus className="w-4 h-4" />
                  Add Item
                </Button>
              </div>

              <div className="space-y-3">
                {lineItems.map((item, index) => (
                  <div
                    key={index}
                    className="flex flex-col sm:flex-row gap-3 p-3 bg-gray-50 rounded-lg"
                  >
                    <div className="flex-1 min-w-0">
                      <Label className="text-xs text-gray-500">Description</Label>
                      <Input
                        value={item.description}
                        onChange={(e) =>
                          updateLineItem(index, "description", e.target.value)
                        }
                        placeholder="Service or product description"
                        className="mt-1"
                      />
                    </div>

                    <div className="w-full sm:w-24">
                      <Label className="text-xs text-gray-500">Qty</Label>
                      <Input
                        type="number"
                        min="0.01"
                        step="0.01"
                        value={item.quantity}
                        onChange={(e) =>
                          updateLineItem(index, "quantity", e.target.value)
                        }
                        className="mt-1"
                      />
                    </div>

                    <div className="w-full sm:w-32">
                      <Label className="text-xs text-gray-500">Unit Price</Label>
                      <Input
                        type="number"
                        min="0"
                        step="0.01"
                        placeholder="0.00"
                        onChange={(e) => {
                          const val = parseFloat(e.target.value) || 0;
                          updateLineItem(index, "unit_price_cents", decimalToCents(val));
                        }}
                        className="mt-1"
                      />
                    </div>

                    <div className="w-full sm:w-24">
                      <Label className="text-xs text-gray-500">Tax %</Label>
                      <Input
                        type="number"
                        min="0"
                        max="100"
                        step="0.1"
                        value={item.tax_rate}
                        onChange={(e) =>
                          updateLineItem(index, "tax_rate", e.target.value)
                        }
                        className="mt-1"
                      />
                    </div>

                    <div className="flex items-end">
                      <button
                        type="button"
                        onClick={() => removeLineItem(index)}
                        disabled={lineItems.length === 1}
                        className="p-2 text-gray-400 hover:text-red-500 disabled:opacity-30 disabled:cursor-not-allowed transition-colors cursor-pointer"
                      >
                        <Trash2 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          {/* Notes */}
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-lg font-semibold text-gray-900">Notes</h2>
              <Textarea
                value={notes}
                onChange={(e) => setNotes(e.target.value)}
                placeholder="Payment terms, late fee policy, thank you message..."
                rows={3}
              />
            </CardContent>
          </Card>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          <Card className="border-0 shadow-sm">
            <CardContent className="p-6 space-y-4">
              <h2 className="text-lg font-semibold text-gray-900">Invoice Details</h2>

              <div>
                <Label htmlFor="issueDate">Issue Date</Label>
                <Input
                  id="issueDate"
                  type="date"
                  value={issueDate}
                  onChange={(e) => setIssueDate(e.target.value)}
                  className="mt-1"
                />
              </div>

              <div>
                <Label htmlFor="dueDate">Due Date *</Label>
                <Input
                  id="dueDate"
                  type="date"
                  value={dueDate}
                  onChange={(e) => setDueDate(e.target.value)}
                  className="mt-1"
                />
              </div>

              <div>
                <Label htmlFor="currency">Currency</Label>
                <Select
                  id="currency"
                  value={currency}
                  onChange={(e) => setCurrency(e.target.value)}
                  className="mt-1"
                >
                  {CURRENCIES.map((c) => (
                    <option key={c} value={c}>
                      {c}
                    </option>
                  ))}
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* Totals */}
          <Card className="border-0 shadow-sm bg-gray-50">
            <CardContent className="p-6 space-y-3">
              <div className="flex justify-between text-sm">
                <span className="text-gray-500">Subtotal</span>
                <span className="font-medium text-gray-900">
                  ${centsToDecimal(subtotalCents)}
                </span>
              </div>
              <div className="flex justify-between text-sm">
                <span className="text-gray-500">Tax</span>
                <span className="font-medium text-gray-900">
                  ${centsToDecimal(taxTotalCents)}
                </span>
              </div>
              <div className="border-t border-gray-200 pt-3 flex justify-between">
                <span className="font-semibold text-gray-900">Total</span>
                <span className="text-2xl font-bold text-gray-900">
                  ${centsToDecimal(totalCents)}
                </span>
              </div>
            </CardContent>
          </Card>

          {/* Actions */}
          <div className="space-y-3">
            <Button
              onClick={() => handleSubmit("sent")}
              disabled={saving}
              className="w-full bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer disabled:cursor-not-allowed"
            >
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
              {saving ? "Saving..." : "Send Invoice"}
            </Button>
            <Button
              variant="outline"
              onClick={() => handleSubmit("draft")}
              disabled={saving}
              className="w-full cursor-pointer disabled:cursor-not-allowed"
            >
              Save as Draft
            </Button>
          </div>
        </div>
      </div>
    </div>
  );
}