import React, { useEffect, useMemo, useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip, LineChart, Line, XAxis, YAxis, CartesianGrid, Legend } from "recharts";
import { Plus, Trash2, Pencil, Save, X, Download, Upload, Wallet, TrendingUp, PieChart as PieIcon } from "lucide-react";

/**
 * LocalStorage Portfolio Tracker
 * - No backend required
 * - Stores holdings + optional value history in localStorage
 * - Manual price input (you can add an API later)
 *
 * How to use in a Vite React app:
 * 1) `npm create vite@latest portfolio-tracker -- --template react`
 * 2) Replace src/App.jsx with this file
 * 3) Ensure Tailwind is set up (or convert classes to CSS)
 */

const LS_KEY = "portfolio_tracker_v1";

const DEFAULTS = {
  currency: "USD",
  holdings: [
    { id: cryptoRandomId(), symbol: "AAPL", name: "Apple", quantity: 10, avgCost: 150, price: 190, category: "Stocks", notes: "" },
    { id: cryptoRandomId(), symbol: "VTI", name: "Vanguard Total Stock Market", quantity: 5, avgCost: 210, price: 245, category: "ETFs", notes: "" },
  ],
  history: [], // [{date: '2025-11-22', totalValue: 12345}]
};

function cryptoRandomId() {
  if (typeof crypto !== "undefined" && crypto.randomUUID) return crypto.randomUUID();
  return Math.random().toString(36).slice(2);
}

function loadState() {
  try {
    if (typeof window === "undefined" || !window.localStorage) return DEFAULTS;
    const raw = window.localStorage.getItem(LS_KEY);
    if (!raw) return DEFAULTS;
    const parsed = JSON.parse(raw);
    return { ...DEFAULTS, ...parsed };
  } catch {
    return DEFAULTS;
  }
}

function saveState(state) {
  try {
    if (typeof window === "undefined" || !window.localStorage) return;
    window.localStorage.setItem(LS_KEY, JSON.stringify(state));
  } catch {
    /* ignore quota/private mode errors */
  }
}

// (state) {
  localStorage.setItem(LS_KEY, JSON.stringify(state));
}

function fmt(n, currency = "USD") {
  if (!Number.isFinite(n)) return "–";
  return new Intl.NumberFormat(undefined, { style: "currency", currency, maximumFractionDigits: 2 }).format(n);
}

function pct(n) {
  if (!Number.isFinite(n)) return "–";
  return `${(n * 100).toFixed(2)}%`;
}

const categories = ["Stocks", "ETFs", "Crypto", "Bonds", "Cash", "Other"];

export default function App() {
  const [state, setState] = useState(() => loadState());
  const [query, setQuery] = useState("");
  const [sortBy, setSortBy] = useState("value"); // value | symbol | pnl
  const [sortDir, setSortDir] = useState("desc");
  const [editingId, setEditingId] = useState(null);
  const [isAddOpen, setIsAddOpen] = useState(false);

  useEffect(() => saveState(state), [state]);

  const totals = useMemo(() => {
    const rows = state.holdings.map(h => {
      const costBasis = h.quantity * h.avgCost;
      const value = h.quantity * h.price;
      const pnl = value - costBasis;
      const pnlPct = costBasis > 0 ? pnl / costBasis : 0;
      return { ...h, costBasis, value, pnl, pnlPct };
    });
    const totalValue = rows.reduce((a, r) => a + r.value, 0);
    const totalCost = rows.reduce((a, r) => a + r.costBasis, 0);
    const totalPnL = totalValue - totalCost;
    const totalPnLPct = totalCost > 0 ? totalPnL / totalCost : 0;
    return { rows, totalValue, totalCost, totalPnL, totalPnLPct };
  }, [state.holdings]);

  const filteredSorted = useMemo(() => {
    const q = query.trim().toLowerCase();
    let rows = totals.rows.filter(r => !q || [r.symbol, r.name, r.category].some(x => (x || "").toLowerCase().includes(q)));
    rows.sort((a, b) => {
      let av, bv;
      if (sortBy === "symbol") { av = a.symbol; bv = b.symbol; return av.localeCompare(bv); }
      if (sortBy === "pnl") { av = a.pnl; bv = b.pnl; }
      else { av = a.value; bv = b.value; }
      const diff = (av > bv ? 1 : av < bv ? -1 : 0);
      return sortDir === "asc" ? diff : -diff;
    });
    return rows;
  }, [totals.rows, query, sortBy, sortDir]);

  const allocation = useMemo(() => {
    const byCat = new Map();
    totals.rows.forEach(r => byCat.set(r.category, (byCat.get(r.category) || 0) + r.value));
    return Array.from(byCat.entries()).map(([name, value]) => ({ name, value }));
  }, [totals.rows]);

  const bySymbol = useMemo(() => totals.rows
    .map(r => ({ name: r.symbol, value: r.value }))
    .sort((a, b) => b.value - a.value)
    .slice(0, 8), [totals.rows]);

  function upsertHolding(h) {
    setState(s => {
      const exists = s.holdings.some(x => x.id === h.id);
      const holdings = exists ? s.holdings.map(x => x.id === h.id ? h : x) : [h, ...s.holdings];
      return { ...s, holdings };
    });
  }

  function deleteHolding(id) {
    setState(s => ({ ...s, holdings: s.holdings.filter(x => x.id !== id) }));
    if (editingId === id) setEditingId(null);
  }

  function snapshotToday() {
    const today = new Date().toISOString().slice(0, 10);
    setState(s => {
      const history = [...s.history.filter(h => h.date !== today), { date: today, totalValue: totals.totalValue }]
        .sort((a, b) => a.date.localeCompare(b.date));
      return { ...s, history };
    });
  }

  function exportJson() {
    const blob = new Blob([JSON.stringify(state, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `portfolio-${new Date().toISOString().slice(0,10)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  }

  function importJson(file) {
    const reader = new FileReader();
    reader.onload = () => {
      try {
        const parsed = JSON.parse(String(reader.result || "{}"));
        if (!parsed.holdings) throw new Error("Invalid file");
        setState({ ...DEFAULTS, ...parsed });
      } catch (e) {
        alert("Could not import: " + e.message);
      }
    };
    reader.readAsText(file);
  }

  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-950 to-slate-900 text-slate-100">
      <Header currency={state.currency} setCurrency={(currency) => setState(s => ({...s, currency}))} onAdd={() => setIsAddOpen(true)} onSnapshot={snapshotToday} onExport={exportJson} onImport={importJson} />

      <main className="mx-auto max-w-6xl px-4 pb-12">
        <StatsBar totals={totals} currency={state.currency} />

        <section className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
          <Card className="lg:col-span-2">
            <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
              <div className="relative w-full md:max-w-sm">
                <input
                  value={query}
                  onChange={(e) => setQuery(e.target.value)}
                  placeholder="Search holdings…"
                  className="w-full rounded-xl bg-slate-900/70 px-4 py-2.5 text-sm outline-none ring-1 ring-slate-800 focus:ring-2 focus:ring-indigo-500"
                />
              </div>

              <div className="flex items-center gap-2">
                <select
                  className="rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800"
                  value={sortBy}
                  onChange={(e) => setSortBy(e.target.value)}
                >
                  <option value="value">Sort: Value</option>
                  <option value="pnl">Sort: P/L</option>
                  <option value="symbol">Sort: Symbol</option>
                </select>
                <button
                  className="rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800 hover:bg-slate-900"
                  onClick={() => setSortDir(d => d === "asc" ? "desc" : "asc")}
                  title="Toggle sort direction"
                >
                  {sortDir === "asc" ? "↑" : "↓"}
                </button>
              </div>
            </div>

            <div className="mt-4 overflow-x-auto">
              <table className="w-full text-left text-sm">
                <thead className="text-xs uppercase tracking-wider text-slate-400">
                  <tr className="border-b border-slate-800">
                    <th className="py-3 pr-3">Asset</th>
                    <th className="py-3 pr-3">Qty</th>
                    <th className="py-3 pr-3">Avg Cost</th>
                    <th className="py-3 pr-3">Price</th>
                    <th className="py-3 pr-3">Value</th>
                    <th className="py-3 pr-3">P/L</th>
                    <th className="py-3 pr-3">Category</th>
                    <th className="py-3 pr-3 text-right">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <AnimatePresence initial={false}>
                    {filteredSorted.map((row) => (
                      <HoldingRow
                        key={row.id}
                        row={row}
                        currency={state.currency}
                        isEditing={editingId === row.id}
                        onEdit={() => setEditingId(row.id)}
                        onCancel={() => setEditingId(null)}
                        onSave={(h) => { upsertHolding(h); setEditingId(null);} }
                        onDelete={() => deleteHolding(row.id)}
                      />
                    ))}
                  </AnimatePresence>
                </tbody>
              </table>

              {filteredSorted.length === 0 && (
                <div className="py-8 text-center text-slate-400">No holdings match your search.</div>
              )}
            </div>
          </Card>

          <Card>
            <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200"><PieIcon className="h-4 w-4" /> Allocation by Category</h3>
            <div className="h-56">
              <Donut data={allocation} currency={state.currency} />
            </div>
            <ul className="mt-2 space-y-1 text-xs text-slate-300">
              {allocation.map(a => (
                <li key={a.name} className="flex items-center justify-between">
                  <span>{a.name}</span>
                  <span>{pct(a.value / (totals.totalValue || 1))}</span>
                </li>
              ))}
            </ul>
          </Card>
        </section>

        <section className="mt-4 grid grid-cols-1 gap-4 lg:grid-cols-2">
          <Card>
            <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200"><TrendingUp className="h-4 w-4" /> Portfolio Value History</h3>
            <p className="mb-3 text-xs text-slate-400">Click “Snapshot today” in the header to log your total value for charts.</p>
            <div className="h-64">
              <HistoryChart history={state.history} currency={state.currency} />
            </div>
          </Card>

          <Card>
            <h3 className="mb-2 flex items-center gap-2 text-sm font-semibold text-slate-200"><Wallet className="h-4 w-4" /> Top Positions</h3>
            <div className="h-64">
              <Donut data={bySymbol} currency={state.currency} />
            </div>
            <ul className="mt-2 space-y-1 text-xs text-slate-300">
              {bySymbol.map(a => (
                <li key={a.name} className="flex items-center justify-between">
                  <span>{a.name}</span>
                  <span>{fmt(a.value, state.currency)}</span>
                </li>
              ))}
            </ul>
          </Card>
        </section>
      </main>

      <Footer />

      <AddModal open={isAddOpen} onClose={() => setIsAddOpen(false)} onSave={(h) => { upsertHolding(h); setIsAddOpen(false);} } />
    </div>
  );
}

function Header({ currency, setCurrency, onAdd, onSnapshot, onExport, onImport }) {
  return (
    <header className="sticky top-0 z-40 border-b border-slate-800/80 bg-slate-950/70 backdrop-blur">
      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
        <div className="flex items-center gap-2">
          <div className="grid h-9 w-9 place-items-center rounded-2xl bg-indigo-600 text-white shadow-lg shadow-indigo-600/20">PT</div>
          <div>
            <div className="text-sm font-semibold">Portfolio Tracker</div>
            <div className="text-xs text-slate-400">LocalStorage • Private • Fast</div>
          </div>
        </div>

        <div className="flex flex-wrap items-center gap-2">
          <select
            className="rounded-xl bg-slate-900/70 px-3 py-2 text-xs ring-1 ring-slate-800"
            value={currency}
            onChange={(e) => setCurrency(e.target.value)}
            title="Currency"
          >
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="GBP">GBP</option>
            <option value="JPY">JPY</option>
            <option value="CAD">CAD</option>
            <option value="AUD">AUD</option>
          </select>

          <HeaderButton onClick={onSnapshot} icon={<Save className="h-4 w-4" />}>Snapshot today</HeaderButton>
          <HeaderButton onClick={onAdd} icon={<Plus className="h-4 w-4" />}>Add holding</HeaderButton>
          <HeaderButton onClick={onExport} icon={<Download className="h-4 w-4" />}>Export</HeaderButton>

          <label className="inline-flex cursor-pointer items-center gap-2 rounded-xl bg-slate-900/70 px-3 py-2 text-xs ring-1 ring-slate-800 hover:bg-slate-900">
            <Upload className="h-4 w-4" /> Import
            <input
              type="file"
              accept="application/json"
              className="hidden"
              onChange={(e) => e.target.files?.[0] && onImport(e.target.files[0])}
            />
          </label>
        </div>
      </div>
    </header>
  );
}

function HeaderButton({ children, onClick, icon }) {
  return (
    <button onClick={onClick} className="inline-flex items-center gap-2 rounded-xl bg-slate-900/70 px-3 py-2 text-xs ring-1 ring-slate-800 hover:bg-slate-900">
      {icon}{children}
    </button>
  );
}

function StatsBar({ totals, currency }) {
  const up = totals.totalPnL >= 0;
  return (
    <section className="mt-5 grid grid-cols-1 gap-3 md:grid-cols-4">
      <StatCard label="Total Value" value={fmt(totals.totalValue, currency)} sub={"Live from your inputs"} />
      <StatCard label="Cost Basis" value={fmt(totals.totalCost, currency)} sub={"Sum of avg cost"} />
      <StatCard label="Total P/L" value={fmt(totals.totalPnL, currency)} sub={pct(totals.totalPnLPct)} tone={up ? "good" : "bad"} />
      <StatCard label="# Holdings" value={String(totals.rows.length)} sub={"Across categories"} />
    </section>
  );
}

function StatCard({ label, value, sub, tone }) {
  const toneClass = tone === "good" ? "text-emerald-300" : tone === "bad" ? "text-rose-300" : "text-slate-100";
  return (
    <Card>
      <div className="text-xs text-slate-400">{label}</div>
      <div className={`mt-1 text-2xl font-semibold ${toneClass}`}>{value}</div>
      <div className="mt-1 text-xs text-slate-500">{sub}</div>
    </Card>
  );
}

function HoldingRow({ row, currency, isEditing, onEdit, onCancel, onSave, onDelete }) {
  const [draft, setDraft] = useState(row);

  useEffect(() => { if (isEditing) setDraft(row); }, [isEditing, row]);

  const input = (key, type = "text", step = "any") => (
    <input
      type={type}
      step={step}
      value={draft[key] ?? ""}
      onChange={(e) => setDraft(d => ({ ...d, [key]: type === "number" ? Number(e.target.value) : e.target.value }))}
      className="w-full rounded-lg bg-slate-900/60 px-2 py-1 text-sm ring-1 ring-slate-800 focus:ring-2 focus:ring-indigo-500"
    />
  );

  return (
    <motion.tr
      layout
      initial={{ opacity: 0, y: 6 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -6 }}
      className="border-b border-slate-900/70"
    >
      <td className="py-3 pr-3">
        <div className="flex items-center gap-3">
          <div className="grid h-9 w-9 place-items-center rounded-xl bg-slate-900 text-xs font-semibold ring-1 ring-slate-800">
            {row.symbol.slice(0, 4)}
          </div>
          <div>
            {isEditing ? (
              <div className="grid grid-cols-2 gap-2">
                {input("symbol")}
                {input("name")}
              </div>
            ) : (
              <>
                <div className="font-medium">{row.symbol}</div>
                <div className="text-xs text-slate-400">{row.name}</div>
              </>
            )}
          </div>
        </div>
      </td>
      <td className="py-3 pr-3 w-28">{isEditing ? input("quantity", "number") : row.quantity}</td>
      <td className="py-3 pr-3 w-32">{isEditing ? input("avgCost", "number") : fmt(row.avgCost, currency)}</td>
      <td className="py-3 pr-3 w-32">{isEditing ? input("price", "number") : fmt(row.price, currency)}</td>
      <td className="py-3 pr-3 w-36 font-medium">{fmt(row.value, currency)}</td>
      <td className={`py-3 pr-3 w-36 ${row.pnl >= 0 ? "text-emerald-300" : "text-rose-300"}`}>
        <div>{fmt(row.pnl, currency)}</div>
        <div className="text-xs text-slate-400">{pct(row.pnlPct)}</div>
      </td>
      <td className="py-3 pr-3 w-36">
        {isEditing ? (
          <select
            value={draft.category}
            onChange={(e) => setDraft(d => ({ ...d, category: e.target.value }))}
            className="w-full rounded-lg bg-slate-900/60 px-2 py-1 text-sm ring-1 ring-slate-800"
          >
            {categories.map(c => <option key={c} value={c}>{c}</option>)}
          </select>
        ) : (
          <span className="rounded-lg bg-slate-900/60 px-2 py-1 text-xs ring-1 ring-slate-800">{row.category}</span>
        )}
      </td>
      <td className="py-3 text-right">
        {isEditing ? (
          <div className="inline-flex items-center gap-1">
            <button
              onClick={() => onSave(draft)}
              className="rounded-lg bg-indigo-600 px-2 py-1 text-xs font-semibold text-white hover:bg-indigo-500"
              title="Save"
            ><Save className="h-4 w-4" /></button>
            <button
              onClick={onCancel}
              className="rounded-lg bg-slate-900/60 px-2 py-1 text-xs ring-1 ring-slate-800 hover:bg-slate-900"
              title="Cancel"
            ><X className="h-4 w-4" /></button>
          </div>
        ) : (
          <div className="inline-flex items-center gap-1">
            <button
              onClick={onEdit}
              className="rounded-lg bg-slate-900/60 px-2 py-1 text-xs ring-1 ring-slate-800 hover:bg-slate-900"
              title="Edit"
            ><Pencil className="h-4 w-4" /></button>
            <button
              onClick={onDelete}
              className="rounded-lg bg-slate-900/60 px-2 py-1 text-xs ring-1 ring-slate-800 hover:bg-rose-950/60 hover:ring-rose-800"
              title="Delete"
            ><Trash2 className="h-4 w-4" /></button>
          </div>
        )}
      </td>
    </motion.tr>
  );
}

function AddModal({ open, onClose, onSave }) {
  const empty = {
    id: cryptoRandomId(),
    symbol: "",
    name: "",
    quantity: 0,
    avgCost: 0,
    price: 0,
    category: "Stocks",
    notes: ""
  };
  const [draft, setDraft] = useState(empty);

  useEffect(() => { if (open) setDraft({ ...empty, id: cryptoRandomId() }); }, [open]);

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 grid place-items-center bg-black/50 p-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.98, y: 8 }}
        animate={{ opacity: 1, scale: 1, y: 0 }}
        className="w-full max-w-lg rounded-2xl border border-slate-800 bg-slate-950 p-4 shadow-2xl"
      >
        <div className="mb-3 flex items-center justify-between">
          <h2 className="text-base font-semibold">Add holding</h2>
          <button onClick={onClose} className="rounded-lg p-1 hover:bg-slate-900"><X className="h-4 w-4" /></button>
        </div>

        <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
          <Field label="Symbol" value={draft.symbol} onChange={(v) => setDraft(d => ({...d, symbol: v.toUpperCase()}))} placeholder="e.g., MSFT" />
          <Field label="Name" value={draft.name} onChange={(v) => setDraft(d => ({...d, name: v}))} placeholder="Microsoft" />
          <Field label="Quantity" type="number" value={draft.quantity} onChange={(v) => setDraft(d => ({...d, quantity: Number(v)}))} />
          <Field label="Average Cost" type="number" value={draft.avgCost} onChange={(v) => setDraft(d => ({...d, avgCost: Number(v)}))} />
          <Field label="Current Price" type="number" value={draft.price} onChange={(v) => setDraft(d => ({...d, price: Number(v)}))} />
          <div>
            <label className="mb-1 block text-xs text-slate-400">Category</label>
            <select
              value={draft.category}
              onChange={(e) => setDraft(d => ({...d, category: e.target.value}))}
              className="w-full rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800"
            >
              {categories.map(c => <option key={c} value={c}>{c}</option>)}
            </select>
          </div>
          <div className="md:col-span-2">
            <label className="mb-1 block text-xs text-slate-400">Notes (optional)</label>
            <textarea
              value={draft.notes}
              onChange={(e) => setDraft(d => ({...d, notes: e.target.value}))}
              placeholder="Anything you want to remember…"
              className="min-h-[70px] w-full rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800"
            />
          </div>
        </div>

        <div className="mt-4 flex justify-end gap-2">
          <button onClick={onClose} className="rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800 hover:bg-slate-900">Cancel</button>
          <button
            onClick={() => onSave(draft)}
            className="rounded-xl bg-indigo-600 px-3 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
            disabled={!draft.symbol}
          >
            Add
          </button>
        </div>
      </motion.div>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", placeholder }) {
  return (
    <div>
      <label className="mb-1 block text-xs text-slate-400">{label}</label>
      <input
        type={type}
        value={value}
        placeholder={placeholder}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded-xl bg-slate-900/70 px-3 py-2 text-sm ring-1 ring-slate-800"
      />
    </div>
  );
}

function Donut({ data, currency }) {
  const colors = ["#6366f1", "#22c55e", "#f59e0b", "#06b6d4", "#a855f7", "#ef4444", "#84cc16", "#e11d48"];
  return (
    <ResponsiveContainer width="100%" height="100%">
      <PieChart>
        <Pie data={data} dataKey="value" nameKey="name" innerRadius="55%" outerRadius="80%" paddingAngle={2}>
          {data.map((_, i) => <Cell key={i} fill={colors[i % colors.length]} />)}
        </Pie>
        <Tooltip formatter={(v) => fmt(Number(v), currency)} />
      </PieChart>
    </ResponsiveContainer>
  );
}

function HistoryChart({ history, currency }) {
  if (!history || history.length === 0) {
    return (
      <div className="grid h-full place-items-center rounded-xl bg-slate-900/40 text-sm text-slate-400 ring-1 ring-slate-800">
        No snapshots yet.
      </div>
    );
  }

  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart data={history} margin={{ top: 10, right: 12, left: 0, bottom: 0 }}>
        <CartesianGrid strokeDasharray="3 3" opacity={0.2} />
        <XAxis dataKey="date" tick={{ fontSize: 12 }} />
        <YAxis tick={{ fontSize: 12 }} tickFormatter={(v)=>fmt(v, currency)} width={80} />
        <Tooltip formatter={(v) => fmt(Number(v), currency)} />
        <Legend />
        <Line type="monotone" dataKey="totalValue" name="Total value" strokeWidth={2} dot={false} />
      </LineChart>
    </ResponsiveContainer>
  );
}

function Card({ children, className = "" }) {
  return (
    <div className={`rounded-2xl border border-slate-800/80 bg-slate-950/60 p-4 shadow-xl shadow-black/20 ${className}`}>{children}</div>
  );
}

function Footer() {
  return (
    <footer className="border-t border-slate-800/80 bg-slate-950/70">
      <div className="mx-auto flex max-w-6xl flex-col gap-2 px-4 py-6 text-xs text-slate-400 md:flex-row md:items-center md:justify-between">
        <div>Data stays in your browser via localStorage.</div>
        <div className="text-slate-500">Tip: add a price API later for auto-updates.</div>
      </div>
    </footer>
  );
}