"use client"

import { useState } from "react"
import { Datepicker } from "@/components/datepicker/datepicker"
import { useFormattedDate } from "@/hooks/use-formatted-date"
import { type Locale, locales } from "@/lib/date-utils"
import type { DateRange } from "@/components/datepicker/preset-shortcuts"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"

export function DatepickerDemoContainer() {
  const { formatDate } = useFormattedDate()
  const [locale, setLocale] = useState<Locale>("en")
  const [mode, setMode] = useState<"single" | "range">("single")
  const [showShortcuts, setShowShortcuts] = useState(true)
  const [selectedDate, setSelectedDate] = useState<Date | null>(null)
  const [selectedRange, setSelectedRange] = useState<DateRange | null>(null)

  const config = locales[locale]
  const isRTL = config.direction === "rtl"
  const formatPickerDate = (date: Date) => {
    const year = date.getFullYear()
    const month = `${date.getMonth() + 1}`.padStart(2, "0")
    const day = `${date.getDate()}`.padStart(2, "0")
    return formatDate(`${year}-${month}-${day}`)
  }

  return (
    <div className="max-w-4xl mx-auto space-y-8">
      {/* Configuration Panel */}
      <Card>
        <CardHeader>
          <CardTitle>Configuration</CardTitle>
          <CardDescription>Customize the datepicker behavior and appearance</CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Locale Selection */}
          <div className="space-y-2">
            <Label htmlFor="locale-select">Language / Locale</Label>
            <Select value={locale} onValueChange={(v) => setLocale(v as Locale)}>
              <SelectTrigger id="locale-select">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="en">English (LTR)</SelectItem>
                <SelectItem value="ar">العربية (RTL)</SelectItem>
                <SelectItem value="fr">Français</SelectItem>
                <SelectItem value="de">Deutsch</SelectItem>
                <SelectItem value="es">Español</SelectItem>
                <SelectItem value="zh">中文</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Mode Selection */}
          <div className="space-y-2">
            <Label htmlFor="mode-select">Selection Mode</Label>
            <Select value={mode} onValueChange={(v) => setMode(v as "single" | "range")}>
              <SelectTrigger id="mode-select">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="single">Single Date</SelectItem>
                <SelectItem value="range">Date Range</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Show Shortcuts Toggle */}
          <div className="flex items-center justify-between">
            <Label htmlFor="shortcuts-toggle">Show Preset Shortcuts</Label>
            <Switch id="shortcuts-toggle" checked={showShortcuts} onCheckedChange={setShowShortcuts} />
          </div>

          {/* Current Direction Badge */}
          <div className="flex items-center gap-2">
            <span className="text-sm text-muted-foreground">Direction:</span>
            <Badge variant={isRTL ? "default" : "secondary"}>{isRTL ? "RTL" : "LTR"}</Badge>
          </div>
        </CardContent>
      </Card>

      {/* Selected Value Display */}
      <Card>
        <CardHeader>
          <CardTitle>Selected Value</CardTitle>
          <CardDescription>Current selection from the datepicker</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {mode === "single" ? (
              <div className="p-4 bg-muted rounded-lg">
                <p className="text-sm text-muted-foreground mb-1">Selected Date:</p>
                <p className="text-lg font-medium">
                  {selectedDate ? formatPickerDate(selectedDate) : "No date selected"}
                </p>
              </div>
            ) : (
              <div className="p-4 bg-muted rounded-lg">
                <p className="text-sm text-muted-foreground mb-1">Selected Range:</p>
                <p className="text-lg font-medium">
                  {selectedRange
                    ? `${formatPickerDate(selectedRange.start)} → ${formatPickerDate(selectedRange.end)}`
                    : "No range selected"}
                </p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* Datepicker Demo */}
      <Card className="overflow-visible">
        <CardHeader>
          <CardTitle>Live Demo</CardTitle>
          <CardDescription>Click the input to open the datepicker. Use keyboard arrows to navigate.</CardDescription>
        </CardHeader>
        <CardContent className="overflow-visible">
          <div dir={isRTL ? "rtl" : "ltr"}>
            <Datepicker
              value={selectedDate}
              onChange={setSelectedDate}
              rangeValue={selectedRange}
              onRangeChange={setSelectedRange}
              locale={locale}
              mode={mode}
              showShortcuts={showShortcuts}
              label={config.timePeriod}
            />
          </div>
        </CardContent>
      </Card>

      {/* Features List */}
      <Card>
        <CardHeader>
          <CardTitle>Core Features</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {[
              { title: "Visual Calendar", desc: "Interactive calendar grid with clear visual states" },
              { title: "Manual Input", desc: "Type dates directly with format validation" },
              { title: "Month/Year Navigation", desc: "Dropdown selectors and arrow controls" },
              { title: "Localization", desc: "6 languages with proper RTL support" },
              { title: "Preset Shortcuts", desc: "Quick selection for common date ranges" },
              { title: "Keyboard Navigation", desc: "Full arrow key and Enter support" },
              { title: "Screen Reader Support", desc: "ARIA labels and semantic roles" },
              { title: "Range Selection", desc: "Select date ranges with visual highlighting" },
              { title: "Responsive Design", desc: "Adapts to mobile and desktop screens" },
            ].map((feature, i) => (
              <div key={i} className="p-3 rounded-lg bg-muted/50">
                <h4 className="font-medium text-sm">{feature.title}</h4>
                <p className="text-xs text-muted-foreground mt-1">{feature.desc}</p>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* Accessibility Notes */}
      <Card>
        <CardHeader>
          <CardTitle>Accessibility Considerations</CardTitle>
        </CardHeader>
        <CardContent>
          <ul className="space-y-2 text-sm text-muted-foreground">
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              All interactive elements have appropriate ARIA labels and roles
            </li>
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              Keyboard navigation with Arrow keys, Enter, Home, End, and Escape
            </li>
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              Focus management with visible focus indicators
            </li>
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              Screen reader announcements for selected dates and navigation
            </li>
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              Sufficient color contrast for all visual states
            </li>
            <li className="flex gap-2">
              <span className="text-primary">•</span>
              RTL support with proper text direction and layout mirroring
            </li>
          </ul>
        </CardContent>
      </Card>
    </div>
  )
}