"use client";

import { useState, type ReactNode } from "react";
import { Check } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import {
  Drawer,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";
import { Button } from "@/components/ui/button";
import { useIsMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils";

// ─── ResponsiveSheet ────────────────────────────────────────────────────────

interface ResponsiveSheetProps {
  open: boolean;
  onOpenChange: (v: boolean) => void;
  title: string;
  maxWidth?: string;
  children: ReactNode;
}

export function ResponsiveSheet({
  open,
  onOpenChange,
  title,
  maxWidth = "sm:max-w-xl",
  children,
}: ResponsiveSheetProps) {
  const isMobile = useIsMobile();

  if (isMobile) {
    return (
      <Drawer open={open} onOpenChange={onOpenChange} direction="bottom">
        <DrawerContent className="max-h-[92dvh]">
          <DrawerHeader className="border-b pb-3">
            <DrawerTitle>{title}</DrawerTitle>
          </DrawerHeader>
          <div className="flex-1 overflow-y-auto px-4 py-4">{children}</div>
        </DrawerContent>
      </Drawer>
    );
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className={cn(maxWidth, "max-h-[90vh] overflow-y-auto")}>
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
        </DialogHeader>
        <div>{children}</div>
      </DialogContent>
    </Dialog>
  );
}

// ─── FormWizard ─────────────────────────────────────────────────────────────

export interface WizardStep {
  label: string;
  content: ReactNode;
}

interface FormWizardProps {
  steps: WizardStep[];
  isPending?: boolean;
  submitLabel?: string;
}

export function FormWizard({ steps, isPending, submitLabel = "Kaydet" }: FormWizardProps) {
  const [current, setCurrent] = useState(0);
  const isFirst = current === 0;
  const isLast = current === steps.length - 1;

  return (
    <div className="space-y-6">
      {/* ── Adım göstergesi ── */}
      <div data-tour="form-step-nav" className="flex items-start">
        {steps.map((step, i) => (
          <div key={i} className="contents">
            <button
              type="button"
              data-tour={`form-circle-${i}`}
              onClick={() => setCurrent(i)}
              className="flex flex-col items-center gap-1.5 shrink-0"
            >
              <div
                className={cn(
                  "size-7 rounded-full flex items-center justify-center text-xs font-semibold border-2 transition-all",
                  i < current && "bg-primary border-primary text-primary-foreground",
                  i === current && "border-primary text-primary bg-primary/10",
                  i > current && "border-border text-muted-foreground",
                )}
              >
                {i < current ? <Check className="size-3.5" /> : <span>{i + 1}</span>}
              </div>
              <span
                className={cn(
                  "text-[10px] font-medium whitespace-nowrap",
                  i === current ? "text-foreground" : "text-muted-foreground",
                )}
              >
                {step.label}
              </span>
            </button>

            {i < steps.length - 1 && (
              <div
                className={cn(
                  "flex-1 h-0.5 mt-3.5 mx-2 rounded-full transition-colors",
                  i < current ? "bg-primary" : "bg-border",
                )}
              />
            )}
          </div>
        ))}
      </div>

      {/* ── İçerik (aktif olmayan adımlar hidden — input'lar yine de submit edilir) ── */}
      <div className="min-h-[180px]">
        {steps.map((step, i) => (
          <div key={i} data-tour={`form-step-content-${i}`} className={i === current ? "space-y-4" : "hidden"}>
            {step.content}
          </div>
        ))}
      </div>

      {/* ── Navigasyon ── */}
      <div className={cn("flex gap-2", isFirst ? "justify-end" : "justify-between")}>
        {!isFirst && (
          <Button type="button" variant="outline" onClick={() => setCurrent((c) => c - 1)}>
            ← Geri
          </Button>
        )}
        {!isLast ? (
          <Button key="next" type="button" onClick={() => setCurrent((c) => c + 1)}>
            İleri →
          </Button>
        ) : (
          <Button key="submit" type="submit" disabled={isPending}>
            {isPending ? "Kaydediliyor…" : submitLabel}
          </Button>
        )}
      </div>
    </div>
  );
}

// ─── FormSection (opsiyonel başlık, adım içinde kullanılabilir) ──────────────

export function FormSection({ label, children }: { label: string; children: ReactNode }) {
  return (
    <div className="space-y-3">
      <p className="text-[11px] font-semibold uppercase tracking-widest text-muted-foreground">
        {label}
      </p>
      {children}
    </div>
  );
}
