"use client";

import { useState } from "react";
import {
  Card, Button, Modal, Sheet, Input, Textarea, Select,
  EmptyState, LoadingShimmer, ConfirmDialog, WashiTape,
  Badge, Avatar, Tabs, TabPanel,
} from "@/components/ui";
import { useTheme } from "@/app/ThemeProvider";

export default function DevComponentsPage() {
  const { theme, toggle } = useTheme();
  const [modalOpen, setModalOpen] = useState(false);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [activeTab, setActiveTab] = useState("one");
  const [inputVal, setInputVal] = useState("");

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 to-amber-50 dark:from-gray-900 dark:to-gray-800 p-6">
      <div className="max-w-3xl mx-auto space-y-10">

        {/* Header */}
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold dark:text-white">Design System</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">Component library — Tia G1</p>
          </div>
          <Button variant="secondary" onClick={toggle}>
            {theme === "dark" ? "🌙 Moon" : "☀️ Sun"}
          </Button>
        </div>

        {/* WashiTape */}
        <Section title="WashiTape">
          <div className="flex flex-wrap gap-4 items-center">
            <WashiTape color="rose" text="rose" />
            <WashiTape color="amber" text="amber" rotate={1} />
            <WashiTape color="blue" text="blue" rotate={-2} />
            <WashiTape color="green" text="green" rotate={2} />
            <WashiTape color="purple" text="purple" rotate={-1} />
            <WashiTape color="mint" text="mint" rotate={1} />
          </div>
        </Section>

        {/* Badge */}
        <Section title="Badge">
          <div className="flex flex-wrap gap-2">
            <Badge>Default</Badge>
            <Badge variant="success" dot>Success</Badge>
            <Badge variant="warning" dot>Warning</Badge>
            <Badge variant="danger" dot>Danger</Badge>
            <Badge variant="info">Info</Badge>
            <Badge variant="rose">Rose</Badge>
            <Badge size="sm" variant="success">Small</Badge>
          </div>
        </Section>

        {/* Avatar */}
        <Section title="Avatar">
          <div className="flex items-end gap-4">
            <Avatar name="Baby Smith" size="xs" />
            <Avatar name="Baby Smith" size="sm" />
            <Avatar name="Baby Smith" size="md" />
            <Avatar name="Baby Smith" size="lg" />
            <Avatar name="Priya Rao" size="md" />
            <Avatar name="James Kim" size="md" />
          </div>
        </Section>

        {/* Button */}
        <Section title="Button">
          <div className="flex flex-wrap gap-3">
            <Button variant="primary">Primary</Button>
            <Button variant="secondary">Secondary</Button>
            <Button variant="ghost">Ghost</Button>
            <Button variant="danger">Danger</Button>
            <Button variant="primary" loading>Loading</Button>
            <Button variant="primary" disabled>Disabled</Button>
            <Button variant="primary" size="sm">Small</Button>
            <Button variant="primary" size="lg">Large</Button>
          </div>
        </Section>

        {/* Card */}
        <Section title="Card">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Card>
              <p className="font-medium dark:text-white">Default card (md padding)</p>
              <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">Some content goes here.</p>
            </Card>
            <Card padding="sm">
              <p className="font-medium dark:text-white">Small padding</p>
            </Card>
            <Card padding="lg">
              <p className="font-medium dark:text-white">Large padding</p>
            </Card>
            <Card onClick={() => alert("clicked")} padding="md">
              <p className="font-medium dark:text-white">Clickable card</p>
              <p className="text-xs text-gray-400 mt-1">Has hover shadow</p>
            </Card>
          </div>
        </Section>

        {/* Inputs */}
        <Section title="Inputs">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <Input label="Baby name" placeholder="e.g. Aarav" value={inputVal} onChange={e => setInputVal(e.target.value)} />
            <Input label="With error" placeholder="..." error="This field is required" />
            <Input label="With hint" placeholder="..." hint="We'll use this to personalize advice" />
            <Input label="Disabled" placeholder="..." disabled />
            <Textarea label="Notes" placeholder="Write a note..." rows={3} />
            <Select label="Feeding type">
              <option>Breast</option>
              <option>Formula</option>
              <option>Both</option>
            </Select>
          </div>
        </Section>

        {/* Tabs */}
        <Section title="Tabs">
          <div className="space-y-4">
            <Tabs
              variant="pill"
              tabs={[
                { id: "one", label: "Feed", icon: "🍼" },
                { id: "two", label: "Sleep", icon: "😴" },
                { id: "three", label: "Diaper", icon: "🧷" },
              ]}
              active={activeTab}
              onChange={setActiveTab}
            />
            <TabPanel id="one" active={activeTab}>
              <Card><p className="dark:text-white">Feed panel content</p></Card>
            </TabPanel>
            <TabPanel id="two" active={activeTab}>
              <Card><p className="dark:text-white">Sleep panel content</p></Card>
            </TabPanel>
            <TabPanel id="three" active={activeTab}>
              <Card><p className="dark:text-white">Diaper panel content</p></Card>
            </TabPanel>

            <Tabs
              variant="underline"
              tabs={[
                { id: "one", label: "Summary" },
                { id: "two", label: "Details" },
                { id: "three", label: "History" },
              ]}
              active={activeTab}
              onChange={setActiveTab}
            />
          </div>
        </Section>

        {/* Loading Shimmer */}
        <Section title="LoadingShimmer">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
            <LoadingShimmer variant="text" lines={4} />
            <LoadingShimmer variant="card" />
            <LoadingShimmer variant="avatar" />
          </div>
        </Section>

        {/* EmptyState */}
        <Section title="EmptyState">
          <Card>
            <EmptyState
              icon="🍼"
              title="No feeds logged yet"
              description="Tap the + button to log your first feeding session."
              action={<Button size="sm">Add Feed</Button>}
            />
          </Card>
        </Section>

        {/* Modal / Sheet / ConfirmDialog */}
        <Section title="Overlays">
          <div className="flex flex-wrap gap-3">
            <Button onClick={() => setModalOpen(true)}>Open Modal</Button>
            <Button variant="secondary" onClick={() => setSheetOpen(true)}>Open Sheet</Button>
            <Button variant="danger" onClick={() => setConfirmOpen(true)}>Open Confirm</Button>
          </div>
        </Section>

      </div>

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Modal example" maxWidth="sm">
        <p className="text-sm text-gray-500 dark:text-gray-400">This is a modal dialog. Press Escape or click outside to close.</p>
        <div className="mt-4 flex gap-2">
          <Button fullWidth onClick={() => setModalOpen(false)}>Done</Button>
        </div>
      </Modal>

      <Sheet open={sheetOpen} onClose={() => setSheetOpen(false)} title="Sheet example" side="bottom">
        <p className="text-sm text-gray-500 dark:text-gray-400">This is a bottom sheet. Swipe down or tap outside to close.</p>
        <div className="mt-4">
          <Button fullWidth onClick={() => setSheetOpen(false)}>Done</Button>
        </div>
      </Sheet>

      <ConfirmDialog
        open={confirmOpen}
        onClose={() => setConfirmOpen(false)}
        onConfirm={() => setConfirmOpen(false)}
        title="Delete this entry?"
        description="This action cannot be undone."
        confirmLabel="Delete"
      />
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div className="space-y-3">
      <h2 className="text-xs font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">{title}</h2>
      {children}
    </div>
  );
}
