"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 { HomeEnergyIcon, HomeEnergySettings } from "@/lib/home-energy";

const ICON_OPTIONS: { value: HomeEnergyIcon; label: string }[] = [
  { value: "heart", label: "قلب (عشق)" },
  { value: "star", label: "ستاره (شانس)" },
  { value: "gem", label: "الماس (آرامش)" },
];

export function HomeEnergyEditor({ initial }: { initial: HomeEnergySettings }) {
  const router = useRouter();
  const [sectionTitle, setSectionTitle] = useState(initial.sectionTitle);
  const [stats, setStats] = useState(
    initial.stats.map((s) => ({
      label: s.label,
      icon: s.icon,
    }))
  );
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);

  function updateStat(index: number, patch: Partial<(typeof stats)[0]>) {
    setStats((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)));
  }

  async function onSave() {
    setSaving(true);
    setError(null);
    setSuccess(null);
    const payload: HomeEnergySettings = {
      sectionTitle: sectionTitle.trim(),
      stats: stats.map((s, index) => ({
        label: s.label.trim(),
        value: initial.stats[index]?.value ?? 0,
        icon: s.icon,
      })),
    };
    if (!payload.sectionTitle) {
      setSaving(false);
      setError("عنوان بخش را وارد کنید.");
      return;
    }
    if (payload.stats.some((s) => !s.label)) {
      setSaving(false);
      setError("عنوان همه نوارها را وارد کنید.");
      return;
    }
    try {
      const res = await fetch("/api/admin/home-energy", {
        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 (
    <Card className="max-w-xl">
      <CardHeader>
        <CardTitle className="text-base">انرژی امروز — صفحه اصلی</CardTitle>
      </CardHeader>
      <CardContent className="space-y-6">
        <div>
          <Label htmlFor="sectionTitle">عنوان بخش</Label>
          <Input
            id="sectionTitle"
            className="mt-1"
            value={sectionTitle}
            onChange={(e) => setSectionTitle(e.target.value)}
            placeholder="✨ انرژی امروز ✨"
          />
        </div>

        <div className="rounded-lg border border-amber-300/60 bg-amber-50/80 dark:bg-amber-950/20 px-4 py-3 text-sm text-amber-900 dark:text-amber-200">
          درصدهای عشق، شانس و آرامش هر روز به‌صورت خودکار بین ۶۵ تا ۱۰۰ تغییر می‌کنند (بر اساس
          تاریخ ایران). نیازی به ویرایش روزانه نیست.
        </div>

        <div className="space-y-4">
          <p className="text-sm font-medium text-muted-foreground">سه نوار پیشرفت</p>
          {stats.map((stat, index) => (
            <div
              key={index}
              className="rounded-lg border border-border/80 p-4 space-y-3"
            >
              <p className="text-sm font-semibold">نوار {index + 1}</p>
              <p className="text-sm text-muted-foreground">
                درصد امروز (خودکار):{" "}
                <span className="font-semibold text-foreground">
                  {initial.stats[index]?.value ?? "—"}%
                </span>
              </p>
              <div>
                <Label>عنوان</Label>
                <Input
                  className="mt-1"
                  value={stat.label}
                  onChange={(e) => updateStat(index, { label: e.target.value })}
                />
              </div>
              <div>
                <Label htmlFor={`icon-${index}`}>آیکن</Label>
                <select
                  id={`icon-${index}`}
                  className="mt-1 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                  value={stat.icon}
                  onChange={(e) =>
                    updateStat(index, { icon: e.target.value as HomeEnergyIcon })
                  }
                >
                  {ICON_OPTIONS.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                      {opt.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          ))}
        </div>

        {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>
      </CardContent>
    </Card>
  );
}