"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { ReadingSpreadsSettings, SpreadType } from "@/lib/reading-spreads";
import { SPREAD_CARD_COUNT } from "@/lib/reading-spreads";

const SPREAD_TYPE_LABELS: Record<SpreadType, string> = {
  "18-card": "فال ۱۸ کارته (احساسی)",
  "7-card": "فال ۷ کارته (تک نیت)",
  "48-card": "فال ۴۸ کارته (کلی)",
};

type SpreadForm = {
  type: SpreadType;
  label: string;
  subtitle: string;
  features: [string, string, string];
};

export function ReadingSpreadsEditor({ initial }: { initial: ReadingSpreadsSettings }) {
  const router = useRouter();
  const [pageTitle, setPageTitle] = useState(initial.pageTitle);
  const [pageDescription, setPageDescription] = useState(initial.pageDescription);
  const [spreads, setSpreads] = useState<SpreadForm[]>(
    initial.spreads.map((s) => ({
      type: s.type,
      label: s.label,
      subtitle: s.subtitle,
      features: [...s.features] as [string, string, string],
    }))
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  function updateSpread(index: number, patch: Partial<SpreadForm>) {
    setSpreads((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)));
  }

  function updateFeature(spreadIndex: number, featureIndex: number, value: string) {
    setSpreads((prev) =>
      prev.map((s, i) => {
        if (i !== spreadIndex) return s;
        const features = [...s.features] as [string, string, string];
        features[featureIndex] = value;
        return { ...s, features };
      })
    );
  }

  async function onSave() {
    setSaving(true);
    setError(null);
    setSuccess(null);
    const payload: ReadingSpreadsSettings = {
      pageTitle: pageTitle.trim(),
      pageDescription: pageDescription.trim(),
      spreads: spreads.map((s) => ({
        type: s.type,
        label: s.label.trim(),
        subtitle: s.subtitle.trim(),
        features: s.features.map((f) => f.trim()) as [string, string, string],
      })),
    };
    if (!payload.pageTitle) {
      setSaving(false);
      setError("عنوان صفحه را وارد کنید.");
      return;
    }
    if (!payload.pageDescription) {
      setSaving(false);
      setError("توضیح صفحه را وارد کنید.");
      return;
    }
    if (payload.spreads.some((s) => !s.label || !s.subtitle)) {
      setSaving(false);
      setError("عنوان و زیرعنوان همه فال‌ها را وارد کنید.");
      return;
    }
    if (payload.spreads.some((s) => s.features.some((f) => !f))) {
      setSaving(false);
      setError("هر سه مورد زیر هر فال را پر کنید.");
      return;
    }
    try {
      const res = await fetch("/api/admin/reading-spreads", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(payload),
      });
      if (!res.ok) {
        const data = await res.json().catch(() => ({}));
        throw new Error(data?.error ?? "خطا در ذخیره");
      }
      setSuccess("متن صفحه انتخاب فال ذخیره شد.");
      router.refresh();
    } catch (e) {
      setError(e instanceof Error ? e.message : "خطا در ذخیره");
    } finally {
      setSaving(false);
    }
  }

  return (
    <div className="space-y-6 max-w-2xl">
      <Card>
        <CardHeader>
          <CardTitle className="text-base">عنوان صفحه انتخاب فال</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <Label htmlFor="pageTitle">عنوان</Label>
            <Input
              id="pageTitle"
              className="mt-1"
              value={pageTitle}
              onChange={(e) => setPageTitle(e.target.value)}
            />
          </div>
          <div>
            <Label htmlFor="pageDescription">توضیح زیر عنوان</Label>
            <Input
              id="pageDescription"
              className="mt-1"
              value={pageDescription}
              onChange={(e) => setPageDescription(e.target.value)}
            />
          </div>
        </CardContent>
      </Card>

      {spreads.map((spread, index) => (
        <Card key={spread.type}>
          <CardHeader>
            <CardTitle className="text-base">
              {SPREAD_TYPE_LABELS[spread.type]} — {SPREAD_CARD_COUNT[spread.type]} کارت
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <Label>عنوان کارت</Label>
              <Input
                className="mt-1"
                value={spread.label}
                onChange={(e) => updateSpread(index, { label: e.target.value })}
                placeholder="فال احساسی ❤️"
              />
            </div>
            <div>
              <Label>زیرعنوان</Label>
              <Input
                className="mt-1"
                value={spread.subtitle}
                onChange={(e) => updateSpread(index, { subtitle: e.target.value })}
                placeholder="فال ۱۸ کارته"
              />
            </div>
            <div className="space-y-3">
              <p className="text-sm font-medium text-muted-foreground">سه مورد (با ✓)</p>
              {spread.features.map((feature, featureIndex) => (
                <div key={featureIndex}>
                  <Label>مورد {featureIndex + 1}</Label>
                  <Input
                    className="mt-1"
                    value={feature}
                    onChange={(e) => updateFeature(index, featureIndex, e.target.value)}
                  />
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      ))}

      {error && <p className="text-sm text-destructive">{error}</p>}
      {success && <p className="text-sm text-green-700">{success}</p>}
      <Button onClick={onSave} disabled={saving}>
        {saving ? "در حال ذخیره..." : "ذخیره"}
      </Button>
    </div>
  );
}