"use client"

import { useState, useEffect } from "react"
import { format } from "date-fns"
import { toast } from "sonner"
import { Calendar, Upload, Plus } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Label } from "@/components/ui/label"
import { Combobox } from "@/components/ui/combobox"
import { UserToggle } from "@/components/user-toggle"
import { CreatePayeeDialog } from "@/components/create-payee-dialog"
import { ConnectionStatus } from "@/components/connection-status"
import type { Payee, Category } from "@/lib/airtable"

type Currency = "VND" | "USD" | "AUD"
type UserType = "Brendon" | "Ivy"

const beneficiaries = ["Brendon", "Ivy", "Jay", "Zi", "Family", "Business", "Friend"]

export default function HomePage() {
  const [payees, setPayees] = useState<Payee[]>([])
  const [categories, setCategories] = useState<Category[]>([])
  const [loading, setLoading] = useState(true)

  // User state with localStorage persistence
  const [currentUser, setCurrentUser] = useState<UserType>("Brendon")
  const [mounted, setMounted] = useState(false)

  // Form state
  const [date, setDate] = useState(format(new Date(), "yyyy-MM-dd"))
  const [selectedPayee, setSelectedPayee] = useState("")
  const [description, setDescription] = useState("")
  const [currency, setCurrency] = useState<Currency>("VND")
  const [amount, setAmount] = useState("")
  const [selectedBeneficiaries, setSelectedBeneficiaries] = useState<string[]>([])
  const [receiptFile, setReceiptFile] = useState<File | null>(null)
  const [receiptPreview, setReceiptPreview] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [showCreatePayee, setShowCreatePayee] = useState(false)

  // Load user from localStorage on mount
  useEffect(() => {
    setMounted(true)
    const savedUser = localStorage.getItem("expenseTrackerUser")
    if (savedUser === "Brendon" || savedUser === "Ivy") {
      setCurrentUser(savedUser)
    }
  }, [])

  // Save user to localStorage when it changes
  const handleUserChange = (user: UserType) => {
    setCurrentUser(user)
    localStorage.setItem("expenseTrackerUser", user)
  }

  // Load payees and categories
  useEffect(() => {
    async function loadData() {
      try {
        const [payeesRes, categoriesRes] = await Promise.all([
          fetch("/api/payees"),
          fetch("/api/categories"),
        ])

        if (!payeesRes.ok) {
          const errorData = await payeesRes.json().catch(() => ({ error: 'Unknown error' }))
          console.error("Payees API error:", errorData)
          throw new Error(`Failed to load payees: ${errorData.error || payeesRes.statusText}`)
        }

        if (!categoriesRes.ok) {
          const errorData = await categoriesRes.json().catch(() => ({ error: 'Unknown error' }))
          console.error("Categories API error:", errorData)
          throw new Error(`Failed to load categories: ${errorData.error || categoriesRes.statusText}`)
        }

        const payeesData = await payeesRes.json()
        const categoriesData = await categoriesRes.json()

        setPayees(payeesData)
        setCategories(categoriesData)
      } catch (error: any) {
        console.error("Error loading data:", error)
        toast.error(error.message || "Failed to load payees and categories")
      } finally {
        setLoading(false)
      }
    }

    loadData()
  }, [])

  // Handle receipt file selection
  const handleReceiptChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (file) {
      setReceiptFile(file)
      const reader = new FileReader()
      reader.onloadend = () => {
        setReceiptPreview(reader.result as string)
      }
      reader.readAsDataURL(file)
    }
  }

  // Toggle beneficiary selection
  const toggleBeneficiary = (beneficiary: string) => {
    setSelectedBeneficiaries((prev) =>
      prev.includes(beneficiary)
        ? prev.filter((b) => b !== beneficiary)
        : [...prev, beneficiary]
    )
  }

  // Quick add VND amounts
  const quickAddAmount = (value: number) => {
    const currentAmount = parseFloat(amount) || 0
    setAmount((currentAmount + value).toString())
  }

  // Handle payee created
  const handlePayeeCreated = (newPayee: Payee) => {
    setPayees((prev) => [...prev, newPayee])
    setSelectedPayee(newPayee.id!)
    setShowCreatePayee(false)
  }

  // Handle form submission
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()

    // Validate required fields
    if (!selectedPayee) {
      toast.error("Please select a payee")
      return
    }
    if (!description.trim()) {
      toast.error("Please enter a description")
      return
    }
    if (!amount || parseFloat(amount) <= 0) {
      toast.error("Please enter a valid amount")
      return
    }

    setIsSubmitting(true)

    try {
      let receiptUrl = ""
      let receiptFilename = ""

      // Upload receipt if present
      if (receiptFile) {
        toast.loading("Uploading receipt...", { id: "upload" })

        const formData = new FormData()
        formData.append("file", receiptFile)

        const uploadRes = await fetch("/api/upload", {
          method: "POST",
          body: formData,
        })

        if (!uploadRes.ok) {
          throw new Error("Failed to upload receipt")
        }

        const uploadData = await uploadRes.json()

        // Get the base URL for the full URL
        const baseUrl = window.location.origin
        receiptUrl = `${baseUrl}${uploadData.fileUrl}`
        receiptFilename = receiptFile.name

        toast.success("Receipt uploaded!", { id: "upload" })
      }

      // Create expense record
      toast.loading("Adding expense...", { id: "expense" })

      const expenseData: any = {
        date,
        payeeId: [selectedPayee],
        descriptionNote: description,
        addedBy: currentUser,
      }

      // Add only the selected currency amount
      if (currency === "VND") expenseData.amountVnd = parseFloat(amount)
      if (currency === "USD") expenseData.amountUsd = parseFloat(amount)
      if (currency === "AUD") expenseData.amountAud = parseFloat(amount)

      // Add optional fields
      if (selectedBeneficiaries.length > 0) {
        expenseData.beneficiary = selectedBeneficiaries
      }

      if (receiptUrl) {
        expenseData.receiptPhotoUrl = receiptUrl
        expenseData.receiptPhotoFilename = receiptFilename
      }

      const expenseRes = await fetch("/api/expenses", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(expenseData),
      })

      if (!expenseRes.ok) {
        throw new Error("Failed to create expense")
      }

      toast.success("Expense added successfully!", { id: "expense" })

      // Reset form
      setDate(format(new Date(), "yyyy-MM-dd"))
      setSelectedPayee("")
      setDescription("")
      setAmount("")
      setSelectedBeneficiaries([])
      setReceiptFile(null)
      setReceiptPreview(null)

      // Auto-close window after 500ms
      setTimeout(() => {
        if (typeof window !== "undefined") {
          window.close()
        }
      }, 500)
    } catch (error) {
      console.error("Error submitting expense:", error)
      toast.error("Failed to add expense")
    } finally {
      setIsSubmitting(false)
    }
  }

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-lg">Loading...</p>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100">
      {/* Connection Status Bar */}
      <ConnectionStatus />

      <div className="p-4 md:p-8">
        <div className="max-w-2xl mx-auto">
          <h1 className="text-3xl font-bold text-center mb-6 text-slate-800">
            Add Expense
          </h1>

          {/* User Toggle */}
          <div className="mb-6">
            <UserToggle value={currentUser} onChange={handleUserChange} />
          </div>

        <form onSubmit={handleSubmit} className="space-y-6">
          {/* Section 1: Date & Payee */}
          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200 shadow-sm">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <Label htmlFor="date" className="text-blue-700 font-semibold mb-2 flex items-center gap-2">
                  <Calendar className="h-4 w-4" />
                  Date
                </Label>
                <Input
                  id="date"
                  type="date"
                  value={date}
                  onChange={(e) => setDate(e.target.value)}
                  required
                  className="bg-white"
                />
              </div>
              <div>
                <div className="flex items-center justify-between mb-2">
                  <Label className="text-blue-700 font-semibold">Payee</Label>
                  <Button
                    type="button"
                    size="sm"
                    variant="outline"
                    onClick={() => setShowCreatePayee(true)}
                    className="h-7 px-2"
                  >
                    <Plus className="h-3 w-3" />
                  </Button>
                </div>
                <Combobox
                  options={payees.map((p) => ({ value: p.id!, label: p.name }))}
                  value={selectedPayee}
                  onValueChange={setSelectedPayee}
                  placeholder="Select payee..."
                  searchPlaceholder="Search payees..."
                  emptyText="No payee found."
                />
              </div>
            </div>
          </div>

          {/* Section 2: Description */}
          <div className="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-200 shadow-sm">
            <Label htmlFor="description" className="text-blue-700 font-semibold mb-2 block">
              Description
            </Label>
            <Textarea
              id="description"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
              placeholder="What was this expense for?"
              required
              rows={3}
              className="bg-white"
            />
          </div>

          {/* Section 3: Amount */}
          <div className="bg-gradient-to-br from-purple-50 to-pink-50 p-6 rounded-lg border border-purple-200 shadow-sm">
            <Label className="text-purple-700 font-semibold mb-3 block">Amount</Label>

            {/* Currency Toggle */}
            <div className="flex gap-2 mb-4">
              {(["VND", "USD", "AUD"] as Currency[]).map((curr) => (
                <button
                  key={curr}
                  type="button"
                  onClick={() => setCurrency(curr)}
                  className={`flex-1 py-2 px-4 rounded-full font-medium transition-all ${
                    currency === curr
                      ? "bg-purple-600 text-white shadow-md"
                      : "bg-white text-purple-600 border border-purple-300 hover:bg-purple-100"
                  }`}
                >
                  {curr}
                </button>
              ))}
            </div>

            {/* Amount Input */}
            <Input
              type="number"
              step="0.01"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              placeholder="0.00"
              required
              className="bg-white mb-3"
            />

            {/* Quick Add Buttons (VND only) */}
            {currency === "VND" && (
              <div className="grid grid-cols-4 gap-2">
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => quickAddAmount(10000)}
                  className="text-purple-600 border-purple-300 hover:bg-purple-100"
                >
                  +10k
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => quickAddAmount(50000)}
                  className="text-purple-600 border-purple-300 hover:bg-purple-100"
                >
                  +50k
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => quickAddAmount(100000)}
                  className="text-purple-600 border-purple-300 hover:bg-purple-100"
                >
                  +100k
                </Button>
                <Button
                  type="button"
                  variant="outline"
                  size="sm"
                  onClick={() => quickAddAmount(1000000)}
                  className="text-purple-600 border-purple-300 hover:bg-purple-100"
                >
                  +1m
                </Button>
              </div>
            )}
          </div>

          {/* Section 4: Beneficiary */}
          <div className="bg-gradient-to-br from-teal-50 to-emerald-50 p-6 rounded-lg border border-teal-200 shadow-sm">
            <Label className="text-teal-700 font-semibold mb-3 block">
              Beneficiary (Optional)
            </Label>
            <div className="grid grid-cols-3 gap-2">
              {beneficiaries.map((beneficiary) => (
                <button
                  key={beneficiary}
                  type="button"
                  onClick={() => toggleBeneficiary(beneficiary)}
                  className={`py-2 px-3 rounded-md font-medium border-2 transition-all ${
                    selectedBeneficiaries.includes(beneficiary)
                      ? "border-teal-500 bg-teal-500 text-white shadow-md"
                      : "border-teal-200 bg-white text-teal-700 hover:border-teal-400"
                  }`}
                >
                  {beneficiary}
                </button>
              ))}
            </div>
          </div>

          {/* Section 5: Receipt Photo */}
          <div className="bg-gradient-to-br from-orange-50 to-amber-50 p-6 rounded-lg border border-orange-200 shadow-sm">
            <Label htmlFor="receipt" className="text-orange-700 font-semibold mb-3 flex items-center gap-2">
              <Upload className="h-4 w-4" />
              Receipt Photo (Optional)
            </Label>
            <Input
              id="receipt"
              type="file"
              accept="image/*"
              capture="environment"
              onChange={handleReceiptChange}
              className="bg-white"
            />
            {receiptPreview && (
              <div className="mt-4">
                <img
                  src={receiptPreview}
                  alt="Receipt preview"
                  className="max-h-40 object-contain rounded-md border border-orange-300"
                />
              </div>
            )}
          </div>

          {/* Submit Button */}
          <Button
            type="submit"
            disabled={isSubmitting}
            size="lg"
            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-semibold text-lg py-6"
          >
            {isSubmitting ? "Adding Expense..." : "Add Expense"}
          </Button>
        </form>
        </div>

        {/* Create Payee Dialog */}
        <CreatePayeeDialog
          open={showCreatePayee}
          onOpenChange={setShowCreatePayee}
          categories={categories}
          onPayeeCreated={handlePayeeCreated}
        />
      </div>
    </div>
  )
}