import { useState } from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from "recharts";

import "./App.css";

// Sample chart data
const data = [
  { name: "Jan", transactions: 4000, frauds: 240 },
  { name: "Feb", transactions: 3000, frauds: 180 },
  { name: "Mar", transactions: 5000, frauds: 350 },
  { name: "Apr", transactions: 4780, frauds: 210 },
];

function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white p-6">
      <header className="flex justify-between items-center mb-8">
        <motion.h1
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
          className="text-3xl font-bold tracking-wide"
        >
          🚀 Fraud Detection Dashboard
        </motion.h1>
        <Button
          onClick={() => setCount(count + 1)}
          className="rounded-2xl shadow-lg px-4"
        >
          Clicks: {count}
        </Button>
      </header>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Stats Card */}
        <Card className="rounded-2xl shadow-lg bg-gray-800">
          <CardContent className="p-6">
            <h2 className="text-xl font-semibold mb-2">Overview</h2>
            <p className="text-gray-300">Track fraud vs transactions in real time.</p>
          </CardContent>
        </Card>

        {/* Chart Card */}
        <Card className="rounded-2xl shadow-lg bg-gray-800">
          <CardContent className="p-6">
            <h2 className="text-xl font-semibold mb-4">Fraud Trends</h2>
            <LineChart
              width={400}
              height={250}
              data={data}
              margin={{ top: 5, right: 30, left: 0, bottom: 5 }}
            >
              <CartesianGrid strokeDasharray="3 3" stroke="#555" />
              <XAxis dataKey="name" stroke="#aaa" />
              <YAxis stroke="#aaa" />
              <Tooltip />
              <Legend />
              <Line type="monotone" dataKey="transactions" stroke="#8884d8" strokeWidth={2} />
              <Line type="monotone" dataKey="frauds" stroke="#ff4d4f" strokeWidth={2} />
            </LineChart>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

export default App;