import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

export default function DailyTradingJournal() {
  const [days, setDays] = useState([]);
  const [pnl, setPnl] = useState("");

  // load from localStorage
  useEffect(() => {
    const saved = localStorage.getItem("dailyJournal");
    if (saved) setDays(JSON.parse(saved));
  }, []);

  // save to localStorage
  useEffect(() => {
    localStorage.setItem("dailyJournal", JSON.stringify(days));
  }, [days]);

  const addDay = () => {
    if (!pnl) return;
    const value = parseFloat(pnl);
    const today = new Date().toLocaleDateString();

    setDays([{ date: today, pnl: value }, ...days]);
    setPnl("");
  };

  const winDays = days.filter(d => d.pnl > 0).length;
  const lossDays = days.filter(d => d.pnl < 0).length;
  const total = days.reduce((a, b) => a + b.pnl, 0);
  const avg = days.length ? total / days.length : 0;
  const winRate = days.length ? (winDays / days.length) * 100 : 0;

  const avgWin = winDays
    ? days.filter(d => d.pnl > 0).reduce((a, b) => a + b.pnl, 0) / winDays
    : 0;

  const avgLoss = lossDays
    ? days.filter(d => d.pnl < 0).reduce((a, b) => a + b.pnl, 0) / lossDays
    : 0;

  return (
    <div className="p-6 max-w-xl mx-auto space-y-4">
      <Card>
        <CardContent className="p-4 space-y-3">
          <h2 className="text-xl font-bold">Daily Trading Journal</h2>
          <Input
            placeholder="Enter daily PnL (e.g. 150 or -80)"
            value={pnl}
            onChange={(e) => setPnl(e.target.value)}
          />
          <Button onClick={addDay}>Add Day</Button>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4 space-y-2">
          <h3 className="font-semibold">Stats</h3>
          <p>Total Days: {days.length}</p>
          <p>Win Days: {winDays}</p>
          <p>Loss Days: {lossDays}</p>
          <p>Win Rate: {winRate.toFixed(2)}%</p>
          <p>Total PnL: ${total.toFixed(2)}</p>
          <p>Average Day: ${avg.toFixed(2)}</p>
          <p>Avg Win: ${avgWin.toFixed(2)}</p>
          <p>Avg Loss: ${avgLoss.toFixed(2)}</p>
        </CardContent>
      </Card>

      <Card>
        <CardContent className="p-4 space-y-2">
          <h3 className="font-semibold">History</h3>
          {days.map((d, i) => (
            <div key={i} className="flex justify-between">
              <span>{d.date}</span>
              <span className={d.pnl >= 0 ? "text-green-500" : "text-red-500"}>
                ${d.pnl}
              </span>
            </div>
          ))}
        </CardContent>
      </Card>
    </div>
  );
}