"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { BottomSheet } from "@/components/ui/bottom-sheet";
import { Card } from "@/components/ui/card";
import { ErrorState } from "@/components/feedback/error-state";
import { Modal } from "@/components/ui/modal";
import { MonthCalendar } from "@/components/ui/month-calendar";
import { ProfileCard } from "@/components/ui/profile-card";
import { Switch } from "@/components/ui/switch";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";

/**
 * Client-only demo for components that need interaction state — kept
 * separate so the style guide page itself stays a Server Component. This
 * is also the reason `ProfileCard`'s `onEdit` and `ErrorState`'s
 * `onRetry` are demonstrated here rather than in page.tsx: a Server
 * Component can't pass a live event-handler closure as a prop to a
 * Client Component (Next.js build error "Event handlers cannot be passed
 * to Client Component props") — the handler has to originate from
 * somewhere already client-side, which this component is.
 */
export function StyleGuideInteractive() {
  const [switchOn, setSwitchOn] = useState(true);
  const [modalOpen, setModalOpen] = useState(false);
  const [sheetOpen, setSheetOpen] = useState(false);
  const [month, setMonth] = useState(() => new Date());
  const [selectedDate, setSelectedDate] = useState<Date | undefined>();
  const [editCount, setEditCount] = useState(0);
  const [retryCount, setRetryCount] = useState(0);

  return (
    <div className="space-y-8">
      <Card className="space-y-4 p-6">
        <Switch
          checked={switchOn}
          onCheckedChange={setSwitchOn}
          label="Booking confirmations"
          description="Email when a booking is confirmed"
        />
        <Switch defaultChecked={false} label="Require staff approval" />
      </Card>

      <Tabs defaultValue="upcoming">
        <TabsList>
          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
          <TabsTrigger value="past">Past</TabsTrigger>
        </TabsList>
        <TabsContent value="upcoming">
          <p className="text-sm text-muted">Upcoming appointments render here.</p>
        </TabsContent>
        <TabsContent value="past">
          <p className="text-sm text-muted">Past appointments render here.</p>
        </TabsContent>
      </Tabs>

      <div className="flex flex-wrap gap-3">
        <Button variant="secondary" onClick={() => setModalOpen(true)}>
          Open Modal
        </Button>
        <Button variant="secondary" onClick={() => setSheetOpen(true)}>
          Open Bottom Sheet
        </Button>
      </div>

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Cancel Appointment?">
        <p className="mb-6 text-sm text-muted">
          This is within the free cancellation window. Are you sure you want to cancel?
        </p>
        <div className="flex gap-3">
          <Button variant="secondary" className="flex-1" onClick={() => setModalOpen(false)}>
            Keep it
          </Button>
          <Button variant="destructive" className="flex-1" onClick={() => setModalOpen(false)}>
            Cancel it
          </Button>
        </div>
      </Modal>

      <BottomSheet open={sheetOpen} onClose={() => setSheetOpen(false)} title="Add a Note">
        <Textarea placeholder="e.g. skin sensitivity, specific style requests…" />
        <Button className="mt-4 w-full" onClick={() => setSheetOpen(false)}>
          Save Note
        </Button>
      </BottomSheet>

      <MonthCalendar month={month} onMonthChange={setMonth} selectedDate={selectedDate} onSelectDate={setSelectedDate} />

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <ProfileCard
            name="Alex Chen"
            meta={`Edited ${editCount}×`}
            onEdit={() => setEditCount((c) => c + 1)}
          />
        </div>
        <ErrorState onRetry={() => setRetryCount((c) => c + 1)} description={`Retried ${retryCount}×`} />
      </div>
    </div>
  );
}