"use client";

import { useId, useState } from "react";
import { Loader2 } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from "@/components/ui/select";

const variantOptions = ["default", "secondary", "outline", "ghost"] as const;
const sizeOptions = ["sm", "default", "lg"] as const;

export function ComponentPlayground() {
  const labelId = useId();
  const variantId = useId();
  const sizeId = useId();
  const [label, setLabel] = useState("Boton principal");
  const [variant, setVariant] = useState<(typeof variantOptions)[number]>("default");
  const [size, setSize] = useState<(typeof sizeOptions)[number]>("default");
  const [loading, setLoading] = useState(false);
  const [disabled, setDisabled] = useState(false);

  return (
    <div className="space-y-6">
      <div className="grid gap-4 md:grid-cols-2">
        <div className="space-y-2">
          <Label htmlFor={labelId}>Etiqueta</Label>
          <Input
            id={labelId}
            value={label}
            onChange={(event) => setLabel(event.target.value)}
          />
        </div>
        <div className="space-y-2">
          <Label htmlFor={variantId}>Variante</Label>
          <Select
            value={variant}
            onValueChange={(value) => setVariant(value as (typeof variantOptions)[number])}
          >
            <SelectTrigger id={variantId}>
              <SelectValue placeholder="Selecciona una variante" />
            </SelectTrigger>
            <SelectContent>
              {variantOptions.map((option) => (
                <SelectItem key={option} value={option}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="space-y-2">
          <Label htmlFor={sizeId}>Tamano</Label>
          <Select
            value={size}
            onValueChange={(value) => setSize(value as (typeof sizeOptions)[number])}
          >
            <SelectTrigger id={sizeId}>
              <SelectValue placeholder="Selecciona un tamano" />
            </SelectTrigger>
            <SelectContent>
              {sizeOptions.map((option) => (
                <SelectItem key={option} value={option}>
                  {option}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div className="flex flex-col gap-3">
          <div className="flex items-center gap-2">
            <Checkbox checked={loading} onCheckedChange={(value) => setLoading(Boolean(value))} />
            <span className="text-sm text-muted-foreground">Estado loading</span>
          </div>
          <div className="flex items-center gap-2">
            <Checkbox checked={disabled} onCheckedChange={(value) => setDisabled(Boolean(value))} />
            <span className="text-sm text-muted-foreground">Deshabilitado</span>
          </div>
        </div>
      </div>

      <div className="surface-panel flex flex-wrap items-center gap-3 p-5">
        <Button variant={variant} size={size} disabled={disabled || loading}>
          {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
          {label}
        </Button>
        <div className="flex flex-wrap gap-2 text-xs">
          <Badge variant="secondary">variant: {variant}</Badge>
          <Badge variant="secondary">size: {size}</Badge>
          {loading ? <Badge variant="secondary">loading</Badge> : null}
          {disabled ? <Badge variant="secondary">disabled</Badge> : null}
        </div>
      </div>
    </div>
  );
}