'use client';

import { useEffect, useState, useCallback } from 'react';
import Link from 'next/link';
import { useRouter, useParams } from 'next/navigation';
import { apiFetchJson, startImpersonation, type AuthUser } from '@/lib/auth';

interface SchoolDetail {
  id: string; name: string; slug: string; email: string;
  phone: string | null; city: string | null; address: string | null;
  logoUrl: string | null; plan: string; isActive: boolean; createdAt: string;
}
interface SchoolMetrics { tenantId: string; tenantName: string; users: number; students: number; branches: number; classrooms: number; }
interface Subscription { id: string; tenantId: string; plan: string; status: string; startsAt: string; endsAt: string | null; planDefinitionId?: string | null; }
interface SubscriptionsResponse { items: Subscription[]; }
interface PlanDefinition { id: string; name: string; slug: string; price: number | null; currency: string; isActive: boolean; }
const PLAN_LABELS: Record<string, { label: string; cls: string }> = {
  TRIAL: { label: 'Deneme', cls: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-400' },
  STARTER: { label: 'Başlangıç', cls: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-400' },
  GROWTH: { label: 'Büyüme', cls: 'bg-violet-50 text-violet-700 dark:bg-violet-950/40 dark:text-violet-400' },
  ENTERPRISE: { label: 'Kurumsal', cls: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400' },
};
const STATUS_MAP: Record<string, { label: string; dot: string; text: string }> = {
  TRIAL: { label: 'Deneme', dot: 'bg-amber-500', text: 'text-amber-700 dark:text-amber-400' },
  ACTIVE: { label: 'Aktif', dot: 'bg-emerald-500', text: 'text-emerald-700 dark:text-emerald-400' },
  SUSPENDED: { label: 'Askıda', dot: 'bg-red-500', text: 'text-red-700 dark:text-red-400' },
  CANCELLED: { label: 'İptal', dot: 'bg-slate-400', text: 'text-slate-600 dark:text-zinc-400' },
};

function Skel({ className }: { className: string }) {
  return <div className={`animate-pulse rounded-xl bg-slate-200 dark:bg-zinc-700 ${className}`} />;
}

export default function SchoolDetailPage() {
  const params = useParams<{ id: string }>();
  const id = params.id;
  const router = useRouter();

  const [school, setSchool] = useState<SchoolDetail | null>(null);
  const [metrics, setMetrics] = useState<SchoolMetrics | null>(null);
  const [subscription, setSubscription] = useState<Subscription | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const [editing, setEditing] = useState(false);
  const [editForm, setEditForm] = useState({ name: '', email: '', phone: '', city: '', address: '', isActive: true });
  const [saving, setSaving] = useState(false);

  const [planModalOpen, setPlanModalOpen] = useState(false);
  const [planDefs, setPlanDefs] = useState<PlanDefinition[]>([]);
  const [planForm, setPlanForm] = useState({ planDefinitionId: '' });
  const [planSaving, setPlanSaving] = useState(false);

  const [impersonating, setImpersonating] = useState(false);
  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
  const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null);

  const showToast = (message: string, type: 'success' | 'error' = 'success') => {
    setToast({ message, type });
    setTimeout(() => setToast(null), 3500);
  };

  const load = useCallback(async () => {
    if (!id) return;
    setLoading(true);
    setError('');
    const [schoolRes, metricsRes, subsRes, plansRes] = await Promise.all([
      apiFetchJson<SchoolDetail>(`/v1/admin/tenants/${id}`),
      apiFetchJson<SchoolMetrics>(`/v1/platform/schools/${id}/metrics`),
      apiFetchJson<SubscriptionsResponse>('/v1/platform/subscriptions'),
      apiFetchJson<{ items: PlanDefinition[] }>('/v1/platform/plan-definitions'),
    ]);
    if (schoolRes.error) { setError(schoolRes.error); setLoading(false); return; }
    if (schoolRes.data) {
      setSchool(schoolRes.data);
      setEditForm({ name: schoolRes.data.name, email: schoolRes.data.email, phone: schoolRes.data.phone ?? '', city: schoolRes.data.city ?? '', address: schoolRes.data.address ?? '', isActive: schoolRes.data.isActive });
    }
    if (metricsRes.data) setMetrics(metricsRes.data);
    if (plansRes.data) setPlanDefs(plansRes.data.items.filter((p) => p.isActive));
    if (subsRes.data) {
      const sub = subsRes.data.items.find((s) => s.tenantId === id) ?? null;
      setSubscription(sub);
      if (sub) setPlanForm({ planDefinitionId: sub.planDefinitionId ?? '' });
    }
    setLoading(false);
  }, [id]);

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

  const handleSaveSchool = async () => {
    if (!school) return;
    setSaving(true);
    const result = await apiFetchJson(`/v1/admin/tenants/${id}`, { method: 'PATCH', body: JSON.stringify(editForm) });
    if (result.error) { showToast(result.error, 'error'); }
    else { setSchool((p) => p ? { ...p, ...editForm } : p); setEditing(false); showToast('Okul bilgileri güncellendi'); }
    setSaving(false);
  };

  const handleSavePlan = async () => {
    if (!subscription) return;
    setPlanSaving(true);
    const body: Record<string, unknown> = {};
    if (planForm.planDefinitionId) body.planDefinitionId = planForm.planDefinitionId;
    const result = await apiFetchJson(`/v1/platform/subscriptions/${subscription.id}`, { method: 'PATCH', body: JSON.stringify(body) });
    if (result.error) { showToast(result.error, 'error'); }
    else { load(); setPlanModalOpen(false); showToast('Abonelik planı güncellendi'); }
    setPlanSaving(false);
  };

  const handleImpersonate = async () => {
    setImpersonating(true);
    const result = await apiFetchJson<{ accessToken: string; refreshToken: string; user: Record<string, unknown> }>('/v1/admin/auth/impersonate', { method: 'POST', body: JSON.stringify({ tenantId: id }) });
    if (result.error || !result.data) { showToast(`Taklit giriş başarısız: ${result.error ?? 'Hata'}`, 'error'); }
    else {
      const u = result.data.user as Record<string, unknown>;
      startImpersonation(result.data.accessToken, result.data.refreshToken, { id: (u.id as string) ?? '', email: (u.email as string) ?? '', name: (u.fullName as string) ?? '', role: (u.role as string) ?? '', tenantSlug: (u.tenantSlug as string) ?? '' } as AuthUser);
      router.push('/school/dashboard');
    }
    setImpersonating(false);
  };

  const handleDelete = async () => {
    setDeleting(true);
    const result = await apiFetchJson(`/v1/admin/tenants/${id}`, { method: 'DELETE' });
    if (result.error) { showToast(result.error, 'error'); setDeleting(false); }
    else router.push('/platform/schools');
  };

  const planInfo = PLAN_LABELS[school?.plan ?? ''] ?? { label: school?.plan ?? '', cls: 'bg-slate-100 text-slate-700' };
  const subStatus = STATUS_MAP[subscription?.status ?? ''];

  return (
    <div className="space-y-6">
      <Link href="/platform/schools" className="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 transition hover:text-slate-800 dark:text-zinc-400 dark:hover:text-zinc-200">
        <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Okullara Dön
      </Link>

      {/* Header */}
      {loading ? (
        <div className="animate-pulse rounded-2xl border border-slate-200 bg-gradient-to-r from-[#f8fafc] to-[#eef2ff] p-5 dark:border-zinc-700 dark:from-zinc-900 dark:to-zinc-800">
          <div className="flex items-center gap-4"><Skel className="h-14 w-14 rounded-2xl" /><div className="space-y-2"><Skel className="h-4 w-32" /><Skel className="h-6 w-48" /></div></div>
        </div>
      ) : error ? (
        <div className="rounded-2xl border border-red-200 bg-red-50 p-5 text-sm text-red-700 dark:border-red-800/40 dark:bg-red-950/20 dark:text-red-400">{error}</div>
      ) : school && (
        <div className="rounded-2xl border border-slate-200 bg-gradient-to-r from-[#f8fafc] to-[#eef2ff] p-5 dark:border-zinc-700 dark:from-zinc-900 dark:to-zinc-800">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div className="flex items-center gap-4">
              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-indigo-100 text-2xl font-bold text-indigo-700 dark:bg-indigo-950/50 dark:text-indigo-300">
                {school.name[0]?.toUpperCase()}
              </div>
              <div>
                <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-500">Okul Detayı</p>
                <h1 className="mt-0.5 text-xl font-bold text-slate-900 dark:text-white">{school.name}</h1>
                <div className="mt-1.5 flex flex-wrap items-center gap-2">
                  <code className="rounded-lg bg-slate-100 px-2 py-0.5 text-xs text-slate-600 dark:bg-zinc-700 dark:text-zinc-300">{school.slug}</code>
                  <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${planInfo.cls}`}>{planInfo.label}</span>
                  <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ${school.isActive ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-400' : 'bg-slate-100 text-slate-600'}`}>
                    <span className={`h-1.5 w-1.5 rounded-full ${school.isActive ? 'bg-emerald-500' : 'bg-slate-400'}`} />
                    {school.isActive ? 'Aktif' : 'Pasif'}
                  </span>
                </div>
              </div>
            </div>
            <button onClick={handleImpersonate} disabled={impersonating} className="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 disabled:opacity-50 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5V4H2v16h5m10 0v-2a4 4 0 00-4-4H11a4 4 0 00-4 4v2m10 0H7m5-10a4 4 0 100-8 4 4 0 000 8z"/></svg>
              {impersonating ? 'Yükleniyor...' : 'Bu Okul Olarak Giriş'}
            </button>
          </div>
        </div>
      )}

      {/* Metrics */}
      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
        {[
          { label: 'Öğrenci', value: metrics?.students },
          { label: 'Kullanıcı', value: metrics?.users },
          { label: 'Şube', value: metrics?.branches },
          { label: 'Sınıf', value: metrics?.classrooms },
        ].map((m) => (
          <div key={m.label} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
            {loading ? (<div className="animate-pulse space-y-2"><Skel className="h-3.5 w-16" /><Skel className="h-8 w-12" /></div>) : (
              <><p className="text-sm font-medium text-slate-500 dark:text-zinc-400">{m.label}</p><p className="mt-2 text-3xl font-bold text-slate-900 dark:text-white">{m.value ?? '—'}</p></>
            )}
          </div>
        ))}
      </div>

      {/* Detail + Subscription */}
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-5">
        {/* School info */}
        <div className="lg:col-span-3">
          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
            <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-zinc-800">
              <h3 className="font-semibold text-slate-900 dark:text-white">Okul Bilgileri</h3>
              {!editing && !loading && (
                <button onClick={() => setEditing(true)} className="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 px-3 py-1.5 text-xs font-semibold text-slate-600 transition hover:bg-slate-50 dark:border-zinc-700 dark:text-zinc-300">
                  <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                  Düzenle
                </button>
              )}
            </div>
            <div className="p-6">
              {loading ? (
                <div className="animate-pulse space-y-4">{[...Array(5)].map((_, i) => (<div key={i} className="flex gap-4"><Skel className="h-4 w-24" /><Skel className="h-4 flex-1" /></div>))}</div>
              ) : editing ? (
                <div className="space-y-4">
                  {([['name', 'Okul Adı', 'text'], ['email', 'E-posta', 'email'], ['phone', 'Telefon', 'tel'], ['city', 'Şehir', 'text'], ['address', 'Adres', 'text']] as [string, string, string][]).map(([k, lbl, t]) => (
                    <div key={k} className="space-y-1.5">
                      <label className="block text-sm font-medium text-slate-700 dark:text-zinc-300">{lbl}</label>
                      <input type={t} value={editForm[k as keyof typeof editForm] as string} onChange={(e) => setEditForm((p) => ({ ...p, [k]: e.target.value }))}
                        className="block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white" />
                    </div>
                  ))}
                  <div className="flex items-center justify-between rounded-xl border border-slate-200 px-4 py-3 dark:border-zinc-700">
                    <span className="text-sm font-medium text-slate-700 dark:text-zinc-300">Erişim Durumu</span>
                    <button type="button" onClick={() => setEditForm((p) => ({ ...p, isActive: !p.isActive }))}
                      className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${editForm.isActive ? 'bg-indigo-600' : 'bg-slate-200 dark:bg-zinc-700'}`}>
                      <span className={`inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform ${editForm.isActive ? 'translate-x-6' : 'translate-x-1'}`} />
                    </button>
                  </div>
                  <div className="flex justify-end gap-3 pt-2">
                    <button onClick={() => setEditing(false)} className="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-zinc-700 dark:text-zinc-300">İptal</button>
                    <button onClick={handleSaveSchool} disabled={saving} className="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-50">{saving ? 'Kaydediliyor...' : 'Kaydet'}</button>
                  </div>
                </div>
              ) : school && (
                <dl className="space-y-3.5">
                  {([['Okul Adı', school.name], ['E-posta', school.email], ['Telefon', school.phone || '—'], ['Şehir', school.city || '—'], ['Adres', school.address || '—'], ['Kayıt', new Date(school.createdAt).toLocaleDateString('tr-TR', { year: 'numeric', month: 'long', day: 'numeric' })]] as [string, string][]).map(([lbl, val]) => (
                    <div key={lbl} className="flex flex-col gap-0.5 sm:flex-row sm:gap-0">
                      <dt className="w-28 shrink-0 text-sm font-medium text-slate-500 dark:text-zinc-400">{lbl}</dt>
                      <dd className="text-sm text-slate-900 dark:text-white">{val}</dd>
                    </div>
                  ))}
                </dl>
              )}
            </div>
          </div>
        </div>

        {/* Subscription + Danger */}
        <div className="space-y-5 lg:col-span-2">
          <div className="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
            <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-zinc-800">
              <h3 className="font-semibold text-slate-900 dark:text-white">Abonelik</h3>
              {!loading && subscription && (
                <button onClick={() => { setPlanForm({ planDefinitionId: subscription.planDefinitionId ?? '' }); setPlanModalOpen(true); }}
                  className="inline-flex items-center gap-1.5 rounded-xl bg-indigo-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-indigo-700">
                  Plan Değiştir
                </button>
              )}
            </div>
            <div className="p-6">
              {loading ? (<div className="animate-pulse space-y-3">{[...Array(5)].map((_, i) => <Skel key={i} className="h-4 w-full" />)}</div>)
                : !subscription ? (<p className="text-sm text-slate-400 dark:text-zinc-500">Abonelik bulunamadı</p>)
                : (
                <dl className="space-y-3.5">
                  <div className="flex items-center justify-between"><dt className="text-sm font-medium text-slate-500 dark:text-zinc-400">Plan</dt><dd><span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${PLAN_LABELS[subscription.plan]?.cls ?? ''}`}>{PLAN_LABELS[subscription.plan]?.label ?? subscription.plan}</span></dd></div>
                  <div className="flex items-center justify-between"><dt className="text-sm font-medium text-slate-500 dark:text-zinc-400">Durum</dt><dd className={`flex items-center gap-1.5 text-sm font-medium ${subStatus?.text ?? ''}`}><span className={`h-1.5 w-1.5 rounded-full ${subStatus?.dot ?? 'bg-slate-400'}`} />{subStatus?.label ?? subscription.status}</dd></div>
                  <div className="flex items-center justify-between"><dt className="text-sm font-medium text-slate-500 dark:text-zinc-400">Başlangıç</dt><dd className="text-sm text-slate-700 dark:text-zinc-300">{new Date(subscription.startsAt).toLocaleDateString('tr-TR')}</dd></div>
                  <div className="flex items-center justify-between"><dt className="text-sm font-medium text-slate-500 dark:text-zinc-400">Bitiş</dt><dd className="text-sm text-slate-700 dark:text-zinc-300">{subscription.endsAt ? new Date(subscription.endsAt).toLocaleDateString('tr-TR') : '—'}</dd></div>
                </dl>
              )}
            </div>
          </div>

          <div className="rounded-2xl border border-red-200 bg-white p-5 shadow-sm dark:border-red-800/40 dark:bg-zinc-900">
            <h4 className="text-sm font-semibold text-red-700 dark:text-red-400">Tehlikeli Bölge</h4>
            <p className="mt-1 text-xs text-slate-500 dark:text-zinc-400">Bu işlem tüm okul verilerini kalıcı olarak siler.</p>
            <button onClick={() => setDeleteModalOpen(true)} className="mt-3 inline-flex items-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 py-2 text-sm font-semibold text-red-700 transition hover:bg-red-100 dark:border-red-800/40 dark:bg-red-950/20 dark:text-red-400">
              <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              Okulu Sil
            </button>
          </div>
        </div>
      </div>

      {/* Plan Modal */}
      {planModalOpen && (
        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-4 backdrop-blur-sm sm:items-center">
          <div className="w-full max-w-md rounded-2xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-zinc-900 dark:ring-white/10">
            <div className="flex items-center justify-between border-b border-slate-100 px-6 py-4 dark:border-zinc-800">
              <h3 className="text-base font-semibold text-slate-900 dark:text-white">Plan Değiştir</h3>
              <button onClick={() => setPlanModalOpen(false)} className="rounded-lg p-1.5 text-slate-400 hover:bg-slate-100 dark:hover:bg-zinc-800"><svg className="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/></svg></button>
            </div>
            <div className="space-y-4 px-6 py-5">
              <div className="space-y-1.5">
                <label className="block text-sm font-medium text-slate-700 dark:text-zinc-300">Plan</label>
                {planDefs.length === 0 ? (
                  <div className="rounded-xl border border-slate-200 bg-slate-50 px-3.5 py-2.5 text-sm text-slate-400 dark:border-zinc-700 dark:bg-zinc-800">
                    Henüz aktif plan tanımı yok
                  </div>
                ) : (
                  <select
                    value={planForm.planDefinitionId}
                    onChange={(e) => setPlanForm((prev) => ({ ...prev, planDefinitionId: e.target.value }))}
                    className="block w-full rounded-xl border border-slate-200 bg-white px-3.5 py-2.5 text-sm shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20 dark:border-zinc-700 dark:bg-zinc-800 dark:text-white"
                  >
                    <option value="">Plan seçin</option>
                    {planDefs.map((p) => (
                      <option key={p.id} value={p.id}>
                        {p.name}{p.price != null ? ` — ₺${Number(p.price).toLocaleString('tr-TR')}/öğrenci/ay` : ''}
                      </option>
                    ))}
                  </select>
                )}
              </div>
            </div>
            <div className="flex justify-end gap-3 border-t border-slate-100 px-6 py-4 dark:border-zinc-800">
              <button onClick={() => setPlanModalOpen(false)} className="rounded-xl border border-slate-200 px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-zinc-700 dark:text-zinc-300">İptal</button>
              <button onClick={handleSavePlan} disabled={planSaving} className="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700 disabled:opacity-50">{planSaving ? 'Kaydediliyor...' : 'Kaydet'}</button>
            </div>
          </div>
        </div>
      )}

      {/* Delete Modal */}
      {deleteModalOpen && (
        <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-4 backdrop-blur-sm sm:items-center">
          <div className="w-full max-w-sm rounded-2xl bg-white shadow-2xl dark:bg-zinc-900">
            <div className="p-6">
              <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-950/40">
                <svg className="h-6 w-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/></svg>
              </div>
              <h3 className="text-lg font-semibold text-slate-900 dark:text-white">Okulu Sil</h3>
              <p className="mt-2 text-sm text-slate-500 dark:text-zinc-400"><strong>{school?.name}</strong> okulunu ve tüm verilerini kalıcı olarak silmek istediğinizden emin misiniz?</p>
            </div>
            <div className="flex gap-3 border-t border-slate-100 px-6 py-4 dark:border-zinc-800">
              <button onClick={() => setDeleteModalOpen(false)} className="flex-1 rounded-xl border border-slate-200 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 dark:border-zinc-700 dark:text-zinc-300">İptal</button>
              <button onClick={handleDelete} disabled={deleting} className="flex-1 rounded-xl bg-red-600 py-2.5 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50">{deleting ? 'Siliniyor...' : 'Evet, Sil'}</button>
            </div>
          </div>
        </div>
      )}

      {toast && (
        <div className={`fixed bottom-5 right-5 z-[60] flex items-center gap-3 rounded-2xl px-5 py-3.5 shadow-xl ${toast.type === 'success' ? 'bg-emerald-600' : 'bg-red-600'} text-white`}>
          <svg className="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">{toast.type === 'success' ? <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7"/> : <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>}</svg>
          <span className="text-sm font-medium">{toast.message}</span>
        </div>
      )}
    </div>
  );
}