"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const timePeriods = [
  { value: "1D", label: "1D" },
  { value: "5D", label: "5D" },
  { value: "1M", label: "1M" },
  { value: "6M", label: "6M" },
  { value: "YTD", label: "YTD" },
  { value: "1Y", label: "1Y" },
  { value: "5Y", label: "5Y" },
  { value: "MAX", label: "MAX" },
]

const historicalData = [
  { date: "Sep 26, 2025", open: 428.3, high: 440.47, low: 421.02, close: 440.4, volume: "102M" },
  { date: "Aug 29, 2025", open: 347.23, high: 348.75, low: 331.7, close: 333.87, volume: "81M" },
  { date: "Jul 31, 2025", open: 319.61, high: 321.37, low: 306.1, close: 308.27, volume: "85M" },
  { date: "Jun 30, 2025", open: 319.9, high: 325.58, low: 316.6, close: 317.66, volume: "77M" },
  { date: "May 30, 2025", open: 355.52, high: 363.68, low: 345.29, close: 346.46, volume: "123M" },
  { date: "Apr 30, 2025", open: 279.9, high: 284.45, low: 270.78, close: 282.16, volume: "129M" },
  { date: "Mar 31, 2025", open: 249.31, high: 260.56, low: 243.36, close: 259.16, volume: "134M" },
  { date: "Feb 28, 2025", open: 279.5, high: 293.88, low: 273.6, close: 292.98, volume: "116M" },
  { date: "Jan 31, 2025", open: 401.53, high: 419.99, low: 401.34, close: 404.6, volume: "84M" },
  { date: "Dec 31, 2024", open: 423.79, high: 427.93, low: 402.54, close: 403.84, volume: "77M" },
  { date: "Nov 29, 2024", open: 336.08, high: 345.45, low: 334.65, close: 345.16, volume: "37M" },
  { date: "Oct 31, 2024", open: 257.99, high: 259.75, low: 249.25, close: 249.85, volume: "67M" },
  { date: "Sep 30, 2024", open: 259.04, high: 264.86, low: 256.77, close: 261.63, volume: "81M" },
  { date: "Aug 30, 2024", open: 208.63, high: 214.57, low: 207.03, close: 214.11, volume: "63M" },
  { date: "Jul 31, 2024", open: 227.9, high: 234.68, low: 226.79, close: 232.07, volume: "67M" },
  { date: "Jun 28, 2024", open: 199.55, high: 203.2, low: 195.26, close: 197.88, volume: "95M" },
  { date: "May 31, 2024", open: 178.5, high: 180.32, low: 173.82, close: 178.08, volume: "67M" },
  { date: "Apr 30, 2024", open: 186.98, high: 190.95, low: 182.84, close: 183.28, volume: "127M" },
  { date: "Mar 28, 2024", open: 177.45, high: 179.57, low: 175.3, close: 175.79, volume: "78M" },
  { date: "Feb 29, 2024", open: 204.18, high: 205.28, low: 198.45, close: 201.88, volume: "86M" },
  { date: "Jan 31, 2024", open: 187.0, high: 193.97, low: 185.85, close: 187.29, volume: "103M" },
  { date: "Dec 29, 2023", open: 255.1, high: 255.19, low: 247.43, close: 248.48, volume: "101M" },
  { date: "Nov 30, 2023", open: 245.14, high: 245.22, low: 236.91, close: 240.08, volume: "132M" },
  { date: "Oct 31, 2023", open: 196.12, high: 202.8, low: 194.07, close: 200.84, volume: "118M" },
  { date: "Sep 29, 2023", open: 250.0, high: 254.77, low: 246.35, close: 250.22, volume: "128M" },
]

export function HistoricalData() {
  const [selectedPeriod, setSelectedPeriod] = useState("1M")
  const [selectedRange, setSelectedRange] = useState("1 month")

  return (
    <Card className="w-full">
      <CardHeader className="p-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center space-x-2">
            {timePeriods.map((period) => (
              <Button
                key={period.value}
                variant={selectedPeriod === period.value ? "default" : "outline"}
                size="sm"
                onClick={() => setSelectedPeriod(period.value)}
                className="h-8 px-3 text-sm"
              >
                {period.label}
              </Button>
            ))}
          </div>
          <div className="flex items-center space-x-2">
            <Select value={selectedRange} onValueChange={setSelectedRange}>
              <SelectTrigger className="w-32 h-8">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1 month">1 month</SelectItem>
                <SelectItem value="3 months">3 months</SelectItem>
                <SelectItem value="6 months">6 months</SelectItem>
                <SelectItem value="1 year">1 year</SelectItem>
                <SelectItem value="5 years">5 years</SelectItem>
              </SelectContent>
            </Select>
            <Button
              variant="outline"
              size="sm"
              className="h-8 px-3 text-sm bg-blue-500/20 text-blue-400 border-blue-500/30"
            >
              Complete History
            </Button>
          </div>
        </div>
      </CardHeader>
      <CardContent className="p-0">
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border">
                <th className="text-left p-2 text-sm font-medium text-muted-foreground">Date</th>
                <th className="text-right p-2 text-sm font-medium text-muted-foreground">Open</th>
                <th className="text-right p-2 text-sm font-medium text-muted-foreground">High</th>
                <th className="text-right p-2 text-sm font-medium text-muted-foreground">Low</th>
                <th className="text-right p-2 text-sm font-medium text-muted-foreground">Close</th>
                <th className="text-right p-2 text-sm font-medium text-muted-foreground">Volume</th>
              </tr>
            </thead>
            <tbody>
              {historicalData.map((row, index) => (
                <tr key={index} className="border-b border-border/50 hover:bg-muted/50">
                  <td className="p-2 text-sm text-foreground leading-tight">{row.date}</td>
                  <td className="p-2 text-sm text-right text-foreground leading-tight">${row.open.toFixed(2)}</td>
                  <td className="p-2 text-sm text-right text-foreground leading-tight">${row.high.toFixed(2)}</td>
                  <td className="p-2 text-sm text-right text-foreground leading-tight">${row.low.toFixed(2)}</td>
                  <td className="p-2 text-sm text-right text-foreground leading-tight">${row.close.toFixed(2)}</td>
                  <td className="p-2 text-sm text-right text-muted-foreground leading-tight">{row.volume}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </CardContent>
    </Card>
  )
}