'use client';

import { useCallback, useEffect, useState } from 'react';
import Link from 'next/link';
import {
  Plus,
  Pencil,
  Trash2,
  MapPin,
  Phone,
  Mail,
  Users,
  BookOpen,
  UserCircle,
  Image,
  Eye,
  Building2,
  ChevronRight,
  X,
} from 'lucide-react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { ConfirmDialog } from '@/components/school/confirm-dialog';
import { useToast } from '@/components/school/toast-context';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { cn } from '@/lib/utils';

type Manager = { id: string; fullName: string };

type Branch = {
  id: string;
  name: string;
  address?: string | null;
  phone?: string | null;
  email?: string | null;
  logoUrl?: string | null;
  slogan?: string | null;
  galleryImages?: string[] | null;
  managerId?: string | null;
  manager?: Manager | null;
  classroomCount?: number;
  studentCount?: number;
};

type FormState = {
  name: string;
  address: string;
  phone: string;
  email: string;
  logoUrl: string;
  slogan: string;
  galleryText: string; // satır başına bir URL
  managerId: string;
};

const emptyForm: FormState = {
  name: '', address: '', phone: '', email: '',
  logoUrl: '', slogan: '', galleryText: '', managerId: '',
};

function BranchAvatar({ logoUrl, name }: { logoUrl?: string | null; name: string }) {
  if (logoUrl) {
    return (
      <img
        src={logoUrl}
        alt={name}
        className="h-16 w-16 rounded-2xl object-cover ring-2 ring-white shadow-md dark:ring-zinc-700"
      />
    );
  }
  return (
    <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-500 to-brand-700 text-2xl font-bold text-white shadow-md ring-2 ring-white dark:ring-zinc-700">
      {name[0]?.toUpperCase()}
    </div>
  );
}

function StatBadge({ icon: Icon, label, value }: { icon: React.ElementType; label: string; value: number | string }) {
  return (
    <div className="flex items-center gap-1.5">
      <Icon size={13} className="text-slate-400 dark:text-zinc-500" strokeWidth={2} />
      <span className="text-xs text-slate-500 dark:text-zinc-400">
        <span className="font-semibold text-slate-800 dark:text-zinc-200">{value}</span> {label}
      </span>
    </div>
  );
}

function BranchCard({
  branch,
  onEdit,
  onDelete,
}: {
  branch: Branch;
  onEdit: (b: Branch) => void;
  onDelete: (id: string) => void;
}) {
  return (
    <div className="group flex flex-col rounded-2xl bg-white shadow-sm ring-1 ring-black/[0.04] transition-all duration-200 hover:shadow-md hover:ring-black/[0.08] dark:bg-zinc-900 dark:ring-white/10 dark:hover:ring-white/15 overflow-hidden">
      {/* Gallery preview */}
      {branch.galleryImages && branch.galleryImages.length > 0 && (
        <div className="relative h-28 overflow-hidden bg-slate-100 dark:bg-zinc-800">
          <img
            src={branch.galleryImages[0]}
            alt="Şube görseli"
            className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
          />
          {branch.galleryImages.length > 1 && (
            <div className="absolute right-2 top-2 flex items-center gap-1 rounded-full bg-black/50 px-2 py-0.5 backdrop-blur-sm">
              <Image size={11} className="text-white" />
              <span className="text-[10px] font-medium text-white">{branch.galleryImages.length}</span>
            </div>
          )}
        </div>
      )}

      <div className="flex flex-1 flex-col p-5">
        {/* Header: logo + name */}
        <div className="flex items-start gap-3">
          <BranchAvatar logoUrl={branch.logoUrl} name={branch.name} />
          <div className="min-w-0 flex-1 pt-1">
            <h3 className="truncate font-urbanist text-base font-bold text-slate-900 dark:text-white">
              {branch.name}
            </h3>
            {branch.slogan && (
              <p className="mt-0.5 truncate text-xs italic text-slate-400 dark:text-zinc-500">{branch.slogan}</p>
            )}
          </div>
        </div>

        {/* Stats */}
        <div className="mt-4 flex flex-wrap gap-3 border-t border-slate-100 pt-3 dark:border-zinc-800">
          <StatBadge icon={BookOpen} label="sınıf" value={branch.classroomCount ?? 0} />
          <StatBadge icon={Users} label="öğrenci" value={branch.studentCount ?? 0} />
        </div>

        {/* Contact info */}
        <ul className="mt-3 space-y-1.5">
          {branch.address && (
            <li className="flex items-start gap-2 text-xs text-slate-600 dark:text-zinc-400">
              <MapPin size={12} className="mt-0.5 shrink-0 text-slate-400" strokeWidth={2} />
              <span className="line-clamp-2">{branch.address}</span>
            </li>
          )}
          {branch.phone && (
            <li className="flex items-center gap-2 text-xs text-slate-600 dark:text-zinc-400">
              <Phone size={12} className="shrink-0 text-slate-400" strokeWidth={2} />
              <span>{branch.phone}</span>
            </li>
          )}
          {branch.email && (
            <li className="flex items-center gap-2 text-xs text-slate-600 dark:text-zinc-400">
              <Mail size={12} className="shrink-0 text-slate-400" strokeWidth={2} />
              <span className="truncate">{branch.email}</span>
            </li>
          )}
          {branch.manager && (
            <li className="flex items-center gap-2 text-xs text-slate-600 dark:text-zinc-400">
              <UserCircle size={12} className="shrink-0 text-slate-400" strokeWidth={2} />
              <span className="truncate">{branch.manager.fullName}</span>
            </li>
          )}
        </ul>

        {/* Actions */}
        <div className="mt-4 flex flex-wrap items-center gap-2 border-t border-slate-100 pt-3 dark:border-zinc-800">
          <Link
            href={`/school/students?branchId=${branch.id}`}
            className="flex items-center gap-1 rounded-lg bg-brand-50 px-2.5 py-1.5 text-xs font-medium text-brand-700 transition-colors hover:bg-brand-100 dark:bg-brand-900/30 dark:text-brand-300"
          >
            <Users size={12} strokeWidth={2} />
            Öğrenciler
            <ChevronRight size={11} strokeWidth={2} />
          </Link>
          <Link
            href={`/school/classrooms?branchId=${branch.id}`}
            className="flex items-center gap-1 rounded-lg bg-slate-100 px-2.5 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-200 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700"
          >
            <BookOpen size={12} strokeWidth={2} />
            Sınıflar
            <ChevronRight size={11} strokeWidth={2} />
          </Link>
          <div className="ml-auto flex items-center gap-1.5">
            <Link
              href={`/school/branches/${branch.id}`}
              className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
              aria-label="Detay"
            >
              <Eye size={14} strokeWidth={2} />
            </Link>
            <button
              type="button"
              onClick={() => onEdit(branch)}
              className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700 dark:hover:bg-zinc-800 dark:hover:text-zinc-200"
              aria-label="Düzenle"
            >
              <Pencil size={14} strokeWidth={2} />
            </button>
            <button
              type="button"
              onClick={() => onDelete(branch.id)}
              className="rounded-lg p-1.5 text-slate-400 transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-950/30 dark:hover:text-red-400"
              aria-label="Pasifleştir"
            >
              <Trash2 size={14} strokeWidth={2} />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

function BranchDialog({
  open,
  editing,
  form,
  saving,
  managers,
  onChange,
  onSave,
  onClose,
}: {
  open: boolean;
  editing: Branch | null;
  form: FormState;
  saving: boolean;
  managers: Manager[];
  onChange: (f: FormState) => void;
  onSave: () => void;
  onClose: () => void;
}) {
  const f = (field: keyof FormState) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) =>
    onChange({ ...form, [field]: e.target.value });

  return (
    <Dialog open={open} onOpenChange={(o) => !o && onClose()}>
      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <Building2 size={18} strokeWidth={2} className="text-brand-600" />
            {editing ? 'Şube Düzenle' : 'Yeni Şube Oluştur'}
          </DialogTitle>
        </DialogHeader>

        <div className="grid gap-4">
          {/* Temel bilgiler */}
          <div className="grid gap-3 rounded-xl bg-slate-50 p-4 dark:bg-zinc-800/50">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">Temel Bilgiler</p>
            <div className="space-y-1">
              <Label>Şube Adı <span className="text-red-500">*</span></Label>
              <Input value={form.name} onChange={f('name')} placeholder="Örn: Merkez Şube" required />
            </div>
            <div className="space-y-1">
              <Label>Slogan</Label>
              <Input value={form.slogan} onChange={f('slogan')} placeholder="Kısa bir slogan (max 200 karakter)" maxLength={200} />
            </div>
            <div className="space-y-1">
              <Label>Şube Yetkilisi</Label>
              <select
                value={form.managerId}
                onChange={f('managerId')}
                className="h-9 w-full rounded-md border border-zinc-200 bg-white px-3 text-sm text-zinc-900 shadow-sm focus:border-brand-400 focus:outline-none dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
              >
                <option value="">— Seçiniz —</option>
                {managers.map((m) => (
                  <option key={m.id} value={m.id}>{m.fullName}</option>
                ))}
              </select>
            </div>
          </div>

          {/* İletişim */}
          <div className="grid gap-3 rounded-xl bg-slate-50 p-4 dark:bg-zinc-800/50">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">İletişim</p>
            <div className="grid grid-cols-2 gap-3">
              <div className="space-y-1">
                <Label>Telefon</Label>
                <Input value={form.phone} onChange={f('phone')} placeholder="0212 555 00 00" type="tel" />
              </div>
              <div className="space-y-1">
                <Label>E-posta</Label>
                <Input value={form.email} onChange={f('email')} placeholder="sube@okul.com" type="email" />
              </div>
            </div>
            <div className="space-y-1">
              <Label>Adres</Label>
              <Input value={form.address} onChange={f('address')} placeholder="Tam adres" />
            </div>
          </div>

          {/* Görsel */}
          <div className="grid gap-3 rounded-xl bg-slate-50 p-4 dark:bg-zinc-800/50">
            <p className="text-[11px] font-semibold uppercase tracking-wider text-slate-400 dark:text-zinc-500">Görsel & Kimlik</p>
            <div className="space-y-1">
              <Label>Logo URL</Label>
              <Input value={form.logoUrl} onChange={f('logoUrl')} placeholder="https://…/logo.png" type="url" />
              {form.logoUrl && (
                <div className="flex items-center gap-2 pt-1">
                  <img src={form.logoUrl} alt="Logo önizleme" className="h-10 w-10 rounded-lg object-cover ring-1 ring-black/10" onError={(e) => (e.currentTarget.style.display = 'none')} />
                  <span className="text-xs text-slate-400">Önizleme</span>
                </div>
              )}
            </div>
            <div className="space-y-1">
              <Label className="flex items-center gap-1.5">
                <Image size={13} strokeWidth={2} />
                Galeri Görselleri (max 10)
              </Label>
              <Textarea
                value={form.galleryText}
                onChange={f('galleryText')}
                placeholder={'https://…/foto1.jpg\nhttps://…/foto2.jpg\n(Her satıra bir URL)'}
                rows={4}
                className="text-xs"
              />
              <p className="text-[11px] text-slate-400 dark:text-zinc-500">Mobil uygulamada gösterilecek fotoğraflar. Her satıra bir URL yazın.</p>
            </div>
          </div>
        </div>

        <DialogFooter className="gap-2">
          <Button type="button" variant="secondary" onClick={onClose}>
            <X size={14} strokeWidth={2} className="mr-1.5" />
            İptal
          </Button>
          <Button type="button" disabled={saving || !form.name.trim()} onClick={onSave}>
            {saving ? 'Kaydediliyor…' : editing ? 'Güncelle' : 'Oluştur'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export default function SchoolBranchesPage() {
  const { toast } = useToast();
  const [items, setItems] = useState<Branch[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [dialogOpen, setDialogOpen] = useState(false);
  const [editing, setEditing] = useState<Branch | null>(null);
  const [form, setForm] = useState<FormState>(emptyForm);
  const [saving, setSaving] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [managers, setManagers] = useState<Manager[]>([]);

  const load = useCallback(async () => {
    setLoading(true);
    setError('');
    const res = await apiFetchJson<Branch[]>('/v1/admin/branches?limit=100');
    if (res.error) {
      setError(res.error);
      setItems([]);
    } else {
      setItems(Array.isArray(res.data) ? res.data : []);
    }
    setLoading(false);
  }, []);

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

  useEffect(() => {
    // Şube yetkilisi için kullanıcı listesi
    apiFetchJson<Manager[]>('/v1/admin/staff?limit=200').then((r) => {
      if (r.data) setManagers(Array.isArray(r.data) ? r.data : []);
    });
  }, []);

  const openCreate = () => {
    setEditing(null);
    setForm(emptyForm);
    setDialogOpen(true);
  };

  const openEdit = (b: Branch) => {
    setEditing(b);
    setForm({
      name: b.name,
      address: b.address ?? '',
      phone: b.phone ?? '',
      email: b.email ?? '',
      logoUrl: b.logoUrl ?? '',
      slogan: b.slogan ?? '',
      galleryText: (b.galleryImages ?? []).join('\n'),
      managerId: b.managerId ?? '',
    });
    setDialogOpen(true);
  };

  const save = async () => {
    setSaving(true);
    const galleryImages = form.galleryText
      .split('\n')
      .map((s) => s.trim())
      .filter(Boolean);

    const body = {
      name: form.name,
      address: form.address || undefined,
      phone: form.phone || undefined,
      email: form.email || undefined,
      logoUrl: form.logoUrl || undefined,
      slogan: form.slogan || undefined,
      galleryImages: galleryImages.length ? galleryImages : undefined,
      managerId: form.managerId || undefined,
    };

    const res = editing
      ? await apiFetchJson(`/v1/admin/branches/${editing.id}`, { method: 'PATCH', body: JSON.stringify(body) })
      : await apiFetchJson('/v1/admin/branches', { method: 'POST', body: JSON.stringify(body) });

    setSaving(false);
    if (res.error) {
      toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    } else {
      toast({ title: editing ? 'Şube güncellendi' : 'Şube oluşturuldu' });
      setDialogOpen(false);
      load();
    }
  };

  const deleteConfirm = async () => {
    if (!deleteId) return;
    const res = await apiFetchJson(`/v1/admin/branches/${deleteId}`, { method: 'DELETE' });
    if (res.error) toast({ title: 'Hata', description: res.error, variant: 'destructive' });
    else {
      toast({ title: 'Şube pasife alındı' });
      setDeleteId(null);
      load();
    }
  };

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="Yapı"
        title="Şubeler"
        description="Kreş lokasyonlarını yönetin; tüm sınıflar ve veriler şubeye bağlıdır."
        actions={
          <Button type="button" onClick={openCreate} className="gap-1.5">
            <Plus size={15} strokeWidth={2.5} />
            Yeni Şube
          </Button>
        }
      />

      {error && (
        <p className="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/50 dark:bg-red-950/30 dark:text-red-400">
          {error}
        </p>
      )}

      {loading ? (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {[1, 2, 3].map((i) => (
            <div key={i} className="h-64 animate-pulse rounded-2xl bg-slate-100 dark:bg-zinc-800" />
          ))}
        </div>
      ) : items.length === 0 ? (
        <div className="flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-200 py-16 text-center dark:border-zinc-700">
          <Building2 size={40} className="text-slate-300 dark:text-zinc-600" strokeWidth={1.5} />
          <p className="mt-3 font-semibold text-slate-600 dark:text-zinc-300">Henüz şube eklenmedi</p>
          <p className="mt-1 text-sm text-slate-400 dark:text-zinc-500">İlk şubeyi oluşturarak başlayın</p>
          <Button type="button" onClick={openCreate} className="mt-4 gap-1.5">
            <Plus size={14} strokeWidth={2.5} />
            Şube Ekle
          </Button>
        </div>
      ) : (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {items.map((b) => (
            <BranchCard key={b.id} branch={b} onEdit={openEdit} onDelete={setDeleteId} />
          ))}
        </div>
      )}

      <BranchDialog
        open={dialogOpen}
        editing={editing}
        form={form}
        saving={saving}
        managers={managers}
        onChange={setForm}
        onSave={save}
        onClose={() => setDialogOpen(false)}
      />

      <ConfirmDialog
        open={!!deleteId}
        onOpenChange={(o) => !o && setDeleteId(null)}
        title="Şubeyi pasifleştir"
        description="Şube kaydı silinmez; pasif şubeye yeni kayıt yapılamaz."
        confirmLabel="Pasifleştir"
        variant="destructive"
        onConfirm={deleteConfirm}
      />
    </div>
  );
}