"use client";

import { useCallback, useEffect, useState } from "react";
import { AppShell } from "@/components/app/AppShell";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { Field, Input, Textarea } from "@/components/ui/Field";
import { ApiError, BranchItem, apiGet, apiPatch } from "@/lib/api";

type BranchDraft = {
  name: string;
  city: string;
  address: string;
  phone: string;
  website: string;
  channel_url: string;
  lat: string;
  lng: string;
};

function toDraft(branch: BranchItem): BranchDraft {
  const s = branch.settings ?? {};
  const map = (s.map as { lat?: number; lng?: number }) ?? {};
  return {
    name: branch.name,
    city: String(s.city ?? ""),
    address: String(s.address ?? ""),
    phone: String(s.phone ?? ""),
    website: String(s.website ?? ""),
    channel_url: String(s.channel_url ?? ""),
    lat: map.lat != null ? String(map.lat) : "",
    lng: map.lng != null ? String(map.lng) : "",
  };
}

export function BranchesPageContent({
  title = "مدارس",
  subtitle = "پروفایل شعب و اطلاعات تماس",
}: {
  title?: string;
  subtitle?: string;
}) {
  const [branches, setBranches] = useState<BranchItem[]>([]);
  const [selectedId, setSelectedId] = useState<number | null>(null);
  const [draft, setDraft] = useState<BranchDraft | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);

  const selected = branches.find((b) => b.id === selectedId) ?? null;

  const load = useCallback(async () => {
    setLoading(true);
    try {
      const list = await apiGet<BranchItem[]>("/branches");
      setBranches(list);
      setSelectedId((current) => current ?? list[0]?.id ?? null);
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در بارگذاری");
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    load();
  }, [load]);

  useEffect(() => {
    if (selected) setDraft(toDraft(selected));
  }, [selected]);

  const save = async () => {
    if (!selected || !draft) return;
    setSaving(true);
    setError(null);
    setMessage(null);
    try {
      await apiPatch(`/branches/${selected.id}`, {
        name: draft.name,
        settings: {
          city: draft.city,
          address: draft.address,
          phone: draft.phone,
          website: draft.website,
          channel_url: draft.channel_url,
          map: draft.lat && draft.lng ? { lat: Number(draft.lat), lng: Number(draft.lng) } : null,
        },
      });
      setMessage("اطلاعات مدرسه ذخیره شد.");
      await load();
    } catch (err) {
      setError(err instanceof ApiError ? err.message : "خطا در ذخیره");
    } finally {
      setSaving(false);
    }
  };

  return (
    <AppShell title={title} subtitle={subtitle}>
      <div className="space-y-4">
        {error ? <Alert tone="error">{error}</Alert> : null}
        {message ? <Alert tone="success">{message}</Alert> : null}

        <div className="flex gap-2 overflow-x-auto pb-1">
          {branches.map((branch) => (
            <button
              key={branch.id}
              type="button"
              onClick={() => setSelectedId(branch.id)}
              className={`shrink-0 rounded-full px-4 py-2 text-xs font-semibold ${
                selectedId === branch.id ? "bg-primary text-white" : "bg-white ring-1 ring-[var(--border)]"
              }`}
            >
              {branch.name}
            </button>
          ))}
        </div>

        {draft && !loading ? (
          <div className="rounded-2xl border border-[var(--border)] bg-white p-4 shadow-card">
            <div className="grid gap-4">
              <Field label="نام مدرسه">
                <Input value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
              </Field>
              <Field label="شهر">
                <Input value={draft.city} onChange={(e) => setDraft({ ...draft, city: e.target.value })} />
              </Field>
              <Field label="آدرس">
                <Textarea value={draft.address} onChange={(e) => setDraft({ ...draft, address: e.target.value })} />
              </Field>
              <Field label="تلفن">
                <Input value={draft.phone} onChange={(e) => setDraft({ ...draft, phone: e.target.value })} />
              </Field>
              <Field label="وب‌سایت">
                <Input value={draft.website} onChange={(e) => setDraft({ ...draft, website: e.target.value })} />
              </Field>
              <Field label="کانال اطلاع‌رسانی (تلگرام و …)">
                <Input value={draft.channel_url} onChange={(e) => setDraft({ ...draft, channel_url: e.target.value })} />
              </Field>
            </div>
            <Button className="mt-5" loading={saving} onClick={save} block>
              ذخیره
            </Button>
          </div>
        ) : (
          <p className="text-sm text-[var(--muted)]">در حال بارگذاری…</p>
        )}
      </div>
    </AppShell>
  );
}