"use client";
import React, { useState } from 'react';

const Dashboard = () => {
  const [dateRange, setDateRange] = useState({ 
    startDate: new Date(), 
    endDate: new Date() 
  });
  const formatDate = (date) => {
    return date.toLocaleDateString('en-US', { 
      month: 'short', 
      day: '2-digit', 
      year: 'numeric' 
    });
  };

  const salesData = [
    { name: "Olivia Martin", email: "olivia.martin@email.com", amount: "+$1,999.00" },
    { name: "Jackson Lee", email: "jackson.lee@email.com", amount: "+$39.00" },
    { name: "Isabella Nguyen", email: "isabella.nguyen@email.com", amount: "+$299.00" },
    { name: "William Kim", email: "will@email.com", amount: "+$99.00" },
    { name: "Sofia Davis", email: "sofia.davis@email.com", amount: "+$39.00" },
  ];


  const CalendarDateRangePicker = () => (
    <div className="flex items-center gap-2">
      <button 
        className="px-3 py-1 border rounded text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors"
        onClick={() => {
          const date = new Date(prompt("Enter start date (YYYY-MM-DD)") || dateRange.startDate);
          setDateRange(prev => ({ ...prev, startDate: date }));
        }}
      >
        Start: {formatDate(dateRange.startDate)}
      </button>
      <span className="text-foreground">to</span>
      <button 
        className="px-3 py-1 border rounded text-foreground border-border hover:bg-accent hover:text-accent-foreground transition-colors"
        onClick={() => {
          const date = new Date(prompt("Enter end date (YYYY-MM-DD)") || dateRange.endDate);
          setDateRange(prev => ({ ...prev, endDate: date }));
        }}
      >
        End: {formatDate(dateRange.endDate)}
      </button>
    </div>
  );





  const Overview = () => (
    <div className="p-4 border rounded-lg border-border">
      <div className="flex justify-between items-end h-40">
        {[100, 80, 60, 40, 20].map((height, index) => (
          <div 
            key={index} 
            className="w-8 opacity-60"
            style={{ 
              height: `${height}px`,
              backgroundColor: `hsl(var(--chart-${(index % 5) + 1}))`
            }}
          />
        ))}
      </div>
    </div>
  );

  const RecentSales = () => (
    <div className="space-y-4">
      {salesData.map((item, index) => (
        <div key={index} className="flex items-center justify-between p-2 border-b border-border">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 rounded-full bg-secondary flex items-center justify-center text-secondary-foreground">
              {item.name[0]}
            </div>
            <div>
              <p className="font-medium text-foreground">{item.name}</p>
              <p className="text-sm text-muted-foreground">{item.email}</p>
            </div>
          </div>
          <span className="font-medium text-foreground">{item.amount}</span>
        </div>
      ))}
    </div>
  );

  return (
    <div className="min-h-screen bg-background text-foreground">
      <main className="container p-4 space-y-4">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold text-foreground">Dashboard</h1>
          <div className="flex items-center space-x-2">
            <CalendarDateRangePicker />
            <button className="px-4 py-2 bg-primary text-primary-foreground rounded hover:opacity-90 transition-opacity">
              Download
            </button>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[
            { title: "Total Revenue", value: "$45,231.89", subtext: "+20.1% from last month" },
            { title: "Subscriptions", value: "+2350", subtext: "+180.1% from last month" },
            { title: "Sales", value: "+12,234", subtext: "+19% from last month" },
            { title: "Active Now", value: "+573", subtext: "+201 since last hour" },
          ].map((card, index) => (
            <div key={index} className="p-6 bg-card border rounded-lg border-border">
              <h3 className="text-sm font-medium text-muted-foreground">{card.title}</h3>
              <p className="text-2xl font-bold mt-1 text-card-foreground">{card.value}</p>
              <p className="text-xs text-muted-foreground mt-1">{card.subtext}</p>
            </div>
          ))}
        </div>

        <div className="grid gap-4 md:grid-cols-2">
          <div className="p-6 bg-card border rounded-lg border-border">
            <h3 className="text-lg font-medium mb-4 text-card-foreground">Overview</h3>
            <Overview />
          </div>
          <div className="p-6 bg-card border rounded-lg space-y-4 border-border">
            <h3 className="text-lg font-medium text-card-foreground">Recent Sales</h3>
            <p className="text-card-foreground">You made 265 sales this month.</p>
            <RecentSales />
          </div>
        </div>
      </main>
    </div>
  );
};

export default Dashboard;