import { useState, useEffect } from "react";
import { format, parseISO } from "date-fns";
import { Dialog, DialogContent, DialogHeader, DialogTitle } 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 { Calendar as CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";
import type { Holding } from "@/types/finance";
import { mergeHistory, historyPointsFor, ASSET_CATEGORIES } from "@/lib/holdings";

interface Props {
  holding: Holding;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSave: (updated: Holding) => void;
}

export function EditHoldingDialog({ holding, open, onOpenChange, onSave }: Props) {
  const [name, setName] = useState(holding.name);
  const [category, setCategory] = useState(holding.category ?? "Other");
  const [currency, setCurrency] = useState(holding.currency ?? "USD");
  const [details, setDetails] = useState(holding.details ?? "");
  const [amount, setAmount] = useState(String(holding.costBasis));
  const [currentValue, setCurrentValue] = useState(String(holding.price));
  const [ticker, setTicker] = useState(holding.symbol ?? "");
  const [quantity, setQuantity] = useState(String(holding.shares ?? 1));
  const [dateObj, setDateObj] = useState<Date>(() => {
    if (holding.dateInvested) {
      try { return parseISO(holding.dateInvested); } catch { /* fall through */ }
    }
    return new Date();
  });

  // Sync fields whenever the holding prop changes (e.g. opening for a different row)
  useEffect(() => {
    setName(holding.name);
    setCategory(holding.category ?? "Other");
    setCurrency(holding.currency ?? "USD");
    setDetails(holding.details ?? "");
    setAmount(String(holding.costBasis));
    setCurrentValue(String(holding.price));
    setTicker(holding.symbol ?? "");
    setQuantity(String(holding.shares ?? 1));
    if (holding.dateInvested) {
      try { setDateObj(parseISO(holding.dateInvested)); } catch { setDateObj(new Date()); }
    } else {
      setDateObj(new Date());
    }
  }, [holding]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name || !amount) 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;

    // Merge, never replace: this dialog used to rebuild `history` from scratch,
    // so editing a holding erased every price point it had accumulated.
    const history = mergeHistory(
      holding.history,
      historyPointsFor(dateStr, costBasis, price, shares)
    );

    const derived = name.length > 4 ? name.substring(0, 4).toUpperCase() : name.toUpperCase();
    onSave({
      ...holding,
      name,
      // A linked public ticker wins (enables live tracking); else fall back to a
      // name-derived placeholder for still-private holdings.
      symbol: ticker.trim() ? ticker.trim().toUpperCase() : derived,
      shares,
      price,
      costBasis,
      change: price - costBasis,
      changePercent: costBasis > 0 ? ((price - costBasis) / costBasis) * 100 : 0,
      currency,
      category,
      details,
      dateInvested: dateStr,
      history,
    });
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle>Edit 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 it's 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">Save Changes</Button>
        </form>
      </DialogContent>
    </Dialog>
  );
}