import { useState } from "react";
import { format } from "date-fns";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar as CalendarUI } from "@/components/ui/calendar";
import { Plus, Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Holding, HistoricalValue } from "@/types/finance";
import { ASSET_CATEGORIES } from "@/lib/holdings";

export function AddInvestmentDialog({ onAdd, defaultCurrency }: { onAdd: (h: Holding) => void; defaultCurrency: string }) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [category, setCategory] = useState("Private Equity");
  const [currency, setCurrency] = useState(defaultCurrency);
  const [details, setDetails] = useState("");
  const [amount, setAmount] = useState("");
  const [currentValue, setCurrentValue] = useState("");
  const [ticker, setTicker] = useState("");
  const [quantity, setQuantity] = useState("1");
  const [dateObj, setDateObj] = useState<Date>(new Date());

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !amount || !dateObj) return;

    const dateStr = format(dateObj, "yyyy-MM-dd");
    const costBasis = parseFloat(amount) || 0;
    const price = currentValue ? parseFloat(currentValue) : costBasis;
    const shares = parseFloat(quantity) > 0 ? parseFloat(quantity) : 1;

    const history: HistoricalValue[] = [{ date: dateStr, value: costBasis }];
    const today = format(new Date(), "yyyy-MM-dd");
    if (price !== costBasis && dateStr !== today) {
      history.push({ date: today, value: price });
    }

    const derived = name.length > 4 ? name.substring(0, 4).toUpperCase() : name.toUpperCase();
    onAdd({
      id: `manual_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
      name,
      // A linked public ticker enables live tracking; else a name-derived placeholder.
      symbol: ticker.trim() ? ticker.trim().toUpperCase() : derived,
      shares,
      price,
      costBasis,
      change: price - costBasis,
      changePercent: costBasis > 0 ? ((price - costBasis) / costBasis) * 100 : 0,
      currency,
      isManual: true,
      category,
      details,
      dateInvested: dateStr,
      history,
    });
    setOpen(false);
    setName(""); setDetails(""); setAmount(""); setCurrentValue(""); setTicker(""); setQuantity("1");
    setDateObj(new Date());
  };

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button size="sm" className="gap-2 shadow-sm whitespace-nowrap"><Plus className="h-4 w-4" /> Add Asset</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Add Manual Investment</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="space-y-4 pt-4">
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Asset Name</Label>
              <Input placeholder="e.g. SpaceX Series A" value={name} onChange={e => setName(e.target.value)} required />
            </div>
            <div className="space-y-2">
              <Label>Category</Label>
              <Select value={category} onValueChange={setCategory}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  {ASSET_CATEGORIES.map(c => <SelectItem key={c} value={c}>{c}</SelectItem>)}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2 flex flex-col pt-0.5">
              <Label className="mb-1">Investment Date</Label>
              <Popover>
                <PopoverTrigger asChild>
                  <Button variant="outline" className={cn("w-full justify-start text-left font-normal", !dateObj && "text-muted-foreground")}>
                    <CalendarIcon className="mr-2 h-4 w-4" />
                    {dateObj ? format(dateObj, "PPP") : "Pick a date"}
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="w-auto p-0 z-[100]" align="start">
                  <CalendarUI mode="single" selected={dateObj} onSelect={(d) => d && setDateObj(d)} initialFocus />
                </PopoverContent>
              </Popover>
            </div>
            <div className="space-y-2">
              <Label>Currency</Label>
              <Select value={currency} onValueChange={setCurrency}>
                <SelectTrigger><SelectValue /></SelectTrigger>
                <SelectContent>
                  <SelectItem value="USD">USD</SelectItem>
                  <SelectItem value="INR">INR</SelectItem>
                  <SelectItem value="EUR">EUR</SelectItem>
                  <SelectItem value="GBP">GBP</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label>Avg cost / share</Label>
              <Input type="number" step="0.01" placeholder="Cost per share" value={amount} onChange={e => setAmount(e.target.value)} required />
            </div>
            <div className="space-y-2">
              <Label>Quantity / Shares</Label>
              <Input type="number" step="0.0001" min="0.0001" placeholder="1" value={quantity} onChange={e => setQuantity(e.target.value)} />
            </div>
            <div className="space-y-2">
              <Label>Current Value</Label>
              <Input type="number" step="0.01" placeholder="Leave empty if unchanged" value={currentValue} onChange={e => setCurrentValue(e.target.value)} />
            </div>
            <div className="space-y-2 col-span-2">
              <Label>Public ticker (optional)</Label>
              <Input placeholder="e.g. AAPL, RELIANCE, set once public for live tracking" value={ticker} onChange={e => setTicker(e.target.value)} />
              <p className="text-xs text-muted-foreground">
                For a public ticker, enter avg cost in its trading currency (e.g. USD for SPCX). The live price will display in that native currency.
              </p>
            </div>
            <div className="space-y-2 col-span-2">
              <Label>Additional Details / Notes</Label>
              <Input placeholder="e.g. Purchased through Securitize" value={details} onChange={e => setDetails(e.target.value)} />
            </div>
          </div>
          <Button type="submit" className="w-full">Track Asset</Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}