"use client";

import Link from "next/link";
import { useState } from "react";
import { Button } from "@/components/ui/Button";
import type { SupportGuide } from "@/lib/support-center";

export function SupportGuideCard({ guide, defaultOpen = false }: { guide: SupportGuide; defaultOpen?: boolean }) {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <article className="overflow-hidden rounded-2xl border border-[var(--border)] bg-white shadow-card">
      <button
        type="button"
        className="flex w-full items-start justify-between gap-3 px-4 py-4 text-right transition hover:bg-slate-50 sm:px-5"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
      >
        <div className="min-w-0 flex-1">
          <h3 className="text-sm font-bold text-slate-900">{guide.title}</h3>
          <p className="mt-1 text-xs leading-6 text-[var(--muted)]">{guide.summary}</p>
        </div>
        <span className="shrink-0 pt-0.5 text-xs text-[var(--muted)]">{open ? "▲" : "▼"}</span>
      </button>

      {open ? (
        <div className="border-t border-[var(--border)] px-4 pb-5 pt-4 sm:px-5">
          <ol className="space-y-4">
            {guide.steps.map((step, index) => (
              <li key={step.title} className="flex gap-3">
                <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-bold text-primary">
                  {index + 1}
                </span>
                <div className="min-w-0 flex-1">
                  <div className="flex flex-wrap items-center gap-2">
                    <h4 className="text-sm font-semibold text-slate-900">{step.title}</h4>
                    {step.href ? (
                      <Link
                        href={step.href}
                        className="rounded-lg bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary transition hover:bg-primary hover:text-white"
                      >
                        رفتن به بخش
                      </Link>
                    ) : null}
                  </div>
                  <p className="mt-1 text-sm leading-7 text-foreground/85">{step.description}</p>
                  {step.tips?.length ? (
                    <ul className="mt-2 space-y-1 rounded-xl bg-amber-50 px-3 py-2 text-xs leading-6 text-amber-900">
                      {step.tips.map((tip) => (
                        <li key={tip}>• {tip}</li>
                      ))}
                    </ul>
                  ) : null}
                </div>
              </li>
            ))}
          </ol>
        </div>
      ) : null}
    </article>
  );
}

export function SupportFeaturedGuide({ guide }: { guide: SupportGuide }) {
  return (
    <section className="rounded-2xl border border-primary/20 bg-gradient-to-br from-primary/5 to-teal-50 p-4 sm:p-5">
      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div>
          <p className="text-xs font-semibold text-primary">راهنمای پیشنهادی</p>
          <h2 className="mt-1 text-lg font-bold text-slate-900">{guide.title}</h2>
          <p className="mt-1 text-sm leading-7 text-[var(--muted)]">{guide.summary}</p>
        </div>
        <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-primary shadow-sm">
          {guide.steps.length} مرحله
        </span>
      </div>
      <SupportGuideCard guide={guide} defaultOpen />
    </section>
  );
}

export function SupportQuickActions({ onSelectContext }: { onSelectContext: () => void }) {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="secondary" onClick={onSelectContext}>
        تغییر نقش / سال تحصیلی
      </Button>
      <Link href="/dashboard">
        <Button variant="secondary">بازگشت به داشبورد</Button>
      </Link>
    </div>
  );
}