import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";

const initialWatches = [
  {
    id: 1,
    model: "Rolex Submariner",
    purchasePrice: "$8,500",
    purchaseDate: "2023-06-15",
  },
  {
    id: 2,
    model: "Omega Speedmaster",
    purchasePrice: "$6,000",
    purchaseDate: "2022-12-10",
  },
];

export default function WatchCollection() {
  const [watches, setWatches] = useState(initialWatches);
  const [open, setOpen] = useState(false);
  const [newWatch, setNewWatch] = useState({ model: "", purchasePrice: "", purchaseDate: "" });

  const addWatch = () => {
    setWatches([...watches, { ...newWatch, id: watches.length + 1 }]);
    setNewWatch({ model: "", purchasePrice: "", purchaseDate: "" });
    setOpen(false);
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">KFK Watch Collection</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {watches.map((watch) => (
          <Card key={watch.id} className="p-4 rounded-lg shadow-md">
            <CardContent>
              <h2 className="text-xl font-semibold">{watch.model}</h2>
              <p className="text-gray-600">Purchase Price: {watch.purchasePrice}</p>
              <p className="text-gray-600">Purchase Date: {watch.purchaseDate}</p>
            </CardContent>
          </Card>
        ))}
      </div>
      <Button onClick={() => setOpen(true)} className="mt-4">Add Watch</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Add a New Watch</DialogTitle>
          </DialogHeader>
          <Input placeholder="Model" value={newWatch.model} onChange={(e) => setNewWatch({ ...newWatch, model: e.target.value })} />
          <Input placeholder="Purchase Price" value={newWatch.purchasePrice} onChange={(e) => setNewWatch({ ...newWatch, purchasePrice: e.target.value })} />
          <Input type="date" value={newWatch.purchaseDate} onChange={(e) => setNewWatch({ ...newWatch, purchaseDate: e.target.value })} />
          <Button onClick={addWatch} className="mt-2">Save</Button>
        </DialogContent>
      </Dialog>
    </div>
  );
}