"use client";

import { useState, useEffect, useRef, useCallback } from "react";
import { ArrowLeft, Loader2, Camera, Sparkles, Image as ImageIcon, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent } from "@/components/ui/card";
import { createExpense, fetchExpenseCategories, uploadReceipt, extractReceiptData } from "@/lib/supabase/expenses-actions";
import type { ExpenseCategory } from "@/lib/supabase/expenses-types";

export default function ExpensesNewPage({
  onBack,
  onSuccess,
}: {
  onBack: () => void;
  onSuccess: () => void;
}) {
  const [categories, setCategories] = useState<ExpenseCategory[]>([]);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Form state
  const [amount, setAmount] = useState("");
  const [currency, setCurrency] = useState("AUD");
  const [categoryId, setCategoryId] = useState("");
  const [vendor, setVendor] = useState("");
  const [description, setDescription] = useState("");
  const [expenseDate, setExpenseDate] = useState(new Date().toISOString().split("T")[0]);
  const [receiptUrl, setReceiptUrl] = useState("");

  // Receipt capture state
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  const [uploading, setUploading] = useState(false);
  const [extracting, setExtracting] = useState(false);
  const [extracted, setExtracted] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    fetchExpenseCategories().then(setCategories).catch(() => {});
  }, []);

  // Cleanup preview URL on unmount
  useEffect(() => {
    return () => {
      if (previewUrl && previewUrl.startsWith("blob:")) URL.revokeObjectURL(previewUrl);
    };
  }, [previewUrl]);

  const handleFileSelect = useCallback(async (file: File) => {
    setSelectedFile(file);
    setExtracted(false);
    // Create preview
    if (previewUrl && previewUrl.startsWith("blob:")) URL.revokeObjectURL(previewUrl);
    setPreviewUrl(URL.createObjectURL(file));
  }, [previewUrl]);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) handleFileSelect(file);
  };

  const handleUploadReceipt = async () => {
    if (!selectedFile) return;
    setUploading(true);
    setError(null);
    try {
      const result = await uploadReceipt(selectedFile);
      if (!result.success) { setError(result.error || "Failed to upload receipt"); return; }
      setReceiptUrl(result.url || "");
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setUploading(false);
    }
  };

  const handleRetake = () => {
    setSelectedFile(null);
    if (previewUrl && previewUrl.startsWith("blob:")) URL.revokeObjectURL(previewUrl);
    setPreviewUrl(null);
    setReceiptUrl("");
    setExtracted(false);
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const handleExtractReceipt = async () => {
    if (!previewUrl) return;
    setExtracting(true);
    setError(null);
    try {
      // Convert blob URL or data URL to base64
      let base64: string;
      if (previewUrl.startsWith("blob:")) {
        const response = await fetch(previewUrl);
        const blob = await response.blob();
        base64 = await new Promise<string>((resolve) => {
          const reader = new FileReader();
          reader.onloadend = () => resolve((reader.result as string).split(",")[1]);
          reader.readAsDataURL(blob);
        });
      } else {
        base64 = previewUrl.split(",")[1];
      }

      const result = await extractReceiptData(base64);
      if (!result.success) { setError(result.error || "Failed to extract receipt data"); return; }
      if (result.data) {
        if (result.data.merchant) setVendor(result.data.merchant);
        if (result.data.amount) setAmount(result.data.amount);
        if (result.data.currency) setCurrency(result.data.currency.toUpperCase());
        if (result.data.date) {
          // Try to parse the date into YYYY-MM-DD format
          const d = new Date(result.data.date);
          if (!isNaN(d.getTime())) {
            setExpenseDate(d.toISOString().split("T")[0]);
          }
        }
        setExtracted(true);
      }
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setExtracting(false);
    }
  };

  const handleSubmit = async () => {
    setError(null);
    const amt = parseFloat(amount);
    if (isNaN(amt) || amt <= 0) { setError("Enter a valid amount"); return; }
    if (!expenseDate) { setError("Select a date"); return; }

    setSaving(true);
    try {
      const result = await createExpense({
        amount: amt,
        currency,
        category_id: categoryId || null,
        employee_id: null,
        vendor: vendor || null,
        description: description || null,
        expense_date: expenseDate,
        status: "draft",
        receipt_url: receiptUrl || null,
      });
      if (!result.success) { setError(result.error || "Failed to create expense"); return; }
      onSuccess();
    } catch (e: any) {
      setError(e.message || "An unexpected error occurred");
    } finally {
      setSaving(false);
    }
  };

  return (
    <div className="p-6 lg:p-8 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">Add Expense</h1>
          <p className="text-gray-500 mt-1">Record a business expense</p>
        </div>
      </div>

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

      <Card className="border-0 shadow-sm">
        <CardContent className="p-6 space-y-5">
          {/* ── Receipt Capture Section ── */}
          <div>
            <Label>Receipt (optional)</Label>
            {!selectedFile ? (
              <div
                onClick={() => fileInputRef.current?.click()}
                className="mt-1 border-2 border-dashed border-gray-200 rounded-xl p-8 flex flex-col items-center justify-center cursor-pointer hover:border-[#1D9E75] hover:bg-[#E1F5EE]/30 transition-colors"
              >
                <Camera className="w-10 h-10 text-gray-300 mb-3" />
                <p className="text-sm font-medium text-gray-500">Tap to photograph receipt</p>
                <p className="text-xs text-gray-400 mt-1">or choose from your files</p>
              </div>
            ) : (
              <div className="mt-2 space-y-3">
                <div className="relative inline-block">
                  <img
                    src={previewUrl!}
                    alt="Receipt preview"
                    className="w-48 h-auto rounded-lg border border-gray-200 shadow-sm"
                  />
                </div>
                <div className="flex gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleRetake}
                    className="gap-1 cursor-pointer text-xs"
                  >
                    <RotateCcw className="w-3.5 h-3.5" />
                    Retake
                  </Button>
                  {!receiptUrl && (
                    <Button
                      size="sm"
                      onClick={handleUploadReceipt}
                      disabled={uploading}
                      className="gap-1 cursor-pointer text-xs bg-[#1D9E75] hover:bg-[#1a8b66] text-white"
                    >
                      {uploading ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <ImageIcon className="w-3.5 h-3.5" />}
                      {uploading ? "Uploading..." : "Upload"}
                    </Button>
                  )}
                </div>
                {receiptUrl && (
                  <p className="text-xs text-emerald-600 flex items-center gap-1">
                    <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full" />
                    Receipt uploaded successfully
                  </p>
                )}
                <div>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleExtractReceipt}
                    disabled={extracting}
                    className="gap-1 cursor-pointer text-xs"
                  >
                    {extracting ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Sparkles className="w-3.5 h-3.5" />}
                    {extracting ? "Extracting..." : "Extract details from receipt"}
                  </Button>
                </div>
                {extracted && (
                  <p className="text-xs text-amber-600 bg-amber-50 border border-amber-200 rounded-md px-3 py-2">
                    Review and confirm the pre-filled values below.
                  </p>
                )}
              </div>
            )}
            <input
              ref={fileInputRef}
              type="file"
              accept="image/*"
              capture="environment"
              onChange={handleInputChange}
              className="hidden"
            />
          </div>

          {/* ── Form Fields ── */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="amount">Amount *</Label>
              <div className="relative mt-1">
                <span className="absolute left-3 top-1/2 -translate-y-1/2 text-sm text-gray-400">$</span>
                <input
                  id="amount"
                  type="number"
                  step="0.01"
                  min="0"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  className="w-full border border-gray-200 rounded-lg pl-7 pr-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
                  placeholder="0.00"
                />
              </div>
            </div>
            <div>
              <Label htmlFor="currency">Currency</Label>
              <select
                id="currency"
                value={currency}
                onChange={(e) => setCurrency(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              >
                <option value="AUD">AUD</option>
                <option value="USD">USD</option>
                <option value="GBP">GBP</option>
                <option value="EUR">EUR</option>
                <option value="NZD">NZD</option>
                <option value="CAD">CAD</option>
                <option value="SGD">SGD</option>
              </select>
            </div>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div>
              <Label htmlFor="category">Category</Label>
              <select
                id="category"
                value={categoryId}
                onChange={(e) => setCategoryId(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              >
                <option value="">Select category</option>
                {categories.map((c) => (
                  <option key={c.id} value={c.id}>{c.name}</option>
                ))}
              </select>
            </div>
            <div>
              <Label htmlFor="expenseDate">Date *</Label>
              <input
                id="expenseDate"
                type="date"
                value={expenseDate}
                onChange={(e) => setExpenseDate(e.target.value)}
                className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              />
            </div>
          </div>

          <div>
            <Label htmlFor="vendor">Vendor</Label>
            <input
              id="vendor"
              type="text"
              value={vendor}
              onChange={(e) => setVendor(e.target.value)}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75]"
              placeholder="e.g. Amazon, Uber, Starbucks"
            />
          </div>

          <div>
            <Label htmlFor="description">Description</Label>
            <textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              rows={3}
              className="mt-1 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-[#1D9E75]/20 focus:border-[#1D9E75] resize-none"
              placeholder="What was this expense for?"
            />
          </div>

          <div className="flex justify-end pt-4 border-t border-gray-100">
            <Button
              onClick={handleSubmit}
              disabled={saving}
              className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white gap-2 cursor-pointer"
            >
              {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : null}
              {saving ? "Saving..." : "Save Expense"}
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}