'use client';

import { useEffect, useState } from 'react';
import {
  Building2,
  Phone,
  Mail,
  MapPin,
  ShieldCheck,
  FileText,
  Loader2,
} from 'lucide-react';
import { AdminHeader } from '@/components/admin/AdminHeader';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Card, CardContent } from '@/components/ui/card';
import { ImageUpload } from '@/components/admin/ImageUpload';
import { RichEditor } from '@/components/admin/RichEditor';
import { adminApi } from '@/lib/admin-services';
import type { SiteConfig } from '@/lib/types';

interface FormState {
  siteName: string;
  logo: string;
  tel: string;
  address: string;
  email: string;
  copyright: string;
  icp: string;
  aboutTitle: string;
  aboutContent: string;
}

const DEFAULT: FormState = {
  siteName: '',
  logo: '',
  tel: '',
  address: '',
  email: '',
  copyright: '',
  icp: '',
  aboutTitle: '',
  aboutContent: '',
};

function SectionHead({
  icon,
  title,
  desc,
}: {
  icon: React.ReactNode;
  title: string;
  desc: string;
}) {
  return (
    <div className="mb-5 flex items-center gap-3">
      <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-slate-800 to-slate-900 text-white shadow-md shadow-slate-900/20 ring-1 ring-inset ring-white/10">
        {icon}
      </span>
      <div>
        <div className="text-sm font-semibold text-slate-900">{title}</div>
        <div className="text-xs text-slate-400">{desc}</div>
      </div>
    </div>
  );
}

function Field({
  label,
  required,
  children,
}: {
  label: string;
  required?: boolean;
  children: React.ReactNode;
}) {
  return (
    <div className="space-y-1.5">
      <Label className="text-xs font-medium text-slate-600">
        {label}
        {required && <span className="ml-0.5 text-brand-600">*</span>}
      </Label>
      {children}
    </div>
  );
}

export default function SiteConfigAdminPage() {
  const [hydrated, setHydrated] = useState(false);
  const [form, setForm] = useState<FormState>(DEFAULT);
  const [saving, setSaving] = useState(false);
  const [loaded, setLoaded] = useState(false);

  useEffect(() => setHydrated(true), []);

  useEffect(() => {
    if (!hydrated) return;
    adminApi
      .siteConfigGet()
      .then((c: SiteConfig) => {
        setForm({
          siteName: c.siteName,
          logo: c.logo,
          tel: c.tel,
          address: c.address,
          email: c.email,
          copyright: c.copyright,
          icp: c.icp,
          aboutTitle: c.aboutTitle,
          aboutContent: c.aboutContent ?? '',
        });
        setLoaded(true);
      })
      .catch((e) => alert((e as Error).message));
  }, [hydrated]);

  const onSave = async () => {
    if (!form.siteName) {
      alert('请填写网站名称');
      return;
    }
    setSaving(true);
    try {
      await adminApi.siteConfigUpdate(form);
      alert('保存成功');
    } catch (e) {
      alert((e as Error).message);
    } finally {
      setSaving(false);
    }
  };

  if (!loaded) {
    return (
      <div className="flex h-40 items-center justify-center text-sm text-slate-400">
        <Loader2 className="mr-2 h-5 w-5 animate-spin" /> 加载中…
      </div>
    );
  }

  const cardCls =
    'border-slate-200/70 bg-white shadow-[0_1px_3px_rgba(15,23,42,0.04),0_8px_24px_-12px_rgba(79,70,229,0.12)]';

  return (
    <div>
      <AdminHeader
        title="网站配置"
        description="管理全站基础信息、联系方式、底部版权与企业简介"
        actions={
          <Button onClick={onSave} disabled={saving}>
            {saving ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                保存中…
              </>
            ) : (
              '保存配置'
            )}
          </Button>
        }
      />

      <div className="grid gap-5 lg:grid-cols-2">
        {/* ===== 品牌标识 ===== */}
        <Card className={cardCls}>
          <CardContent className="p-6">
            <SectionHead
              icon={<Building2 className="h-4 w-4" />}
              title="品牌标识"
              desc="站点名称与 Logo"
            />
            <div className="space-y-4">
              <Field label="网站名称" required>
                <Input
                  className="h-10"
                  value={form.siteName}
                  onChange={(e) =>
                    setForm({ ...form, siteName: e.target.value })
                  }
                  placeholder="如：智管物业"
                />
              </Field>
              <Field label="Logo 图片">
                <ImageUpload
                  value={form.logo}
                  onChange={(url) => setForm({ ...form, logo: url })}
                  hint="透明背景 PNG 最佳，建议 200x48"
                />
              </Field>
            </div>
          </CardContent>
        </Card>

        {/* ===== 联系方式 ===== */}
        <Card className={cardCls}>
          <CardContent className="p-6">
            <SectionHead
              icon={<Phone className="h-4 w-4" />}
              title="联系方式"
              desc="客户咨询与对外联络"
            />
            <div className="space-y-4">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <Field label="联系电话">
                  <div className="relative">
                    <Phone className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                    <Input
                      className="h-10 pl-9"
                      value={form.tel}
                      onChange={(e) =>
                        setForm({ ...form, tel: e.target.value })
                      }
                      placeholder="400-000-0000"
                    />
                  </div>
                </Field>
                <Field label="商务邮箱">
                  <div className="relative">
                    <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                    <Input
                      className="h-10 pl-9"
                      value={form.email}
                      onChange={(e) =>
                        setForm({ ...form, email: e.target.value })
                      }
                      placeholder="business@example.com"
                    />
                  </div>
                </Field>
              </div>
              <Field label="公司地址">
                <div className="relative">
                  <MapPin className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <Input
                    className="h-10 pl-9"
                    value={form.address}
                    onChange={(e) =>
                      setForm({ ...form, address: e.target.value })
                    }
                    placeholder="省市区详细地址"
                  />
                </div>
              </Field>
            </div>
          </CardContent>
        </Card>

        {/* ===== 版权与备案 ===== */}
        <Card className={cardCls}>
          <CardContent className="p-6">
            <SectionHead
              icon={<ShieldCheck className="h-4 w-4" />}
              title="版权与备案"
              desc="底部声明与合规信息"
            />
            <div className="space-y-4">
              <Field label="底部版权">
                <Textarea
                  rows={2}
                  className="resize-none"
                  value={form.copyright}
                  onChange={(e) =>
                    setForm({ ...form, copyright: e.target.value })
                  }
                  placeholder="© 2026 企业名称 版权所有"
                />
              </Field>
              <Field label="备案号">
                <Input
                  className="h-10"
                  value={form.icp}
                  onChange={(e) => setForm({ ...form, icp: e.target.value })}
                  placeholder="如：京ICP备 00000000 号"
                />
              </Field>
            </div>
          </CardContent>
        </Card>

        {/* ===== 企业简介 ===== */}
        <Card className={`${cardCls} lg:col-span-2`}>
          <CardContent className="p-6">
            <SectionHead
              icon={<FileText className="h-4 w-4" />}
              title="企业简介"
              desc="关于我们页面的标题与正文"
            />
            <div className="space-y-4">
              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <Field label="简介标题">
                  <Input
                    className="h-10"
                    value={form.aboutTitle}
                    onChange={(e) =>
                      setForm({ ...form, aboutTitle: e.target.value })
                    }
                    placeholder="如：关于我们"
                  />
                </Field>
              </div>
              <Field label="简介正文（富文本）">
                <RichEditor
                  value={form.aboutContent}
                  onChange={(html) =>
                    setForm({ ...form, aboutContent: html })
                  }
                />
              </Field>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}