'use client';

import { useEffect, useState, useCallback } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import Link from 'next/link';
import { apiFetchJson, startImpersonation, type AuthUser } from '@/lib/auth';
import {
  ListDataCard,
  ListDataCardBody,
  ListDataCardHeader,
  ListDataCardTitleBlock,
  ListDataCardToolbar,
  TableSegment,
  TableSegmentGroup,
  TableToolbarSearch,
} from '@/components/school/list-data-card';
import { TableDownloadAllButton, TableExportMenu } from '@/components/school/table-toolbar';
import SchoolModal, { type School } from './SchoolModal';

export default function SchoolsPage() {
  const searchParams = useSearchParams();
  const router = useRouter();

  const [schools, setSchools] = useState<School[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');
  const [category, setCategory] = useState<'active' | 'pending'>('active');
  const [modalOpen, setModalOpen] = useState(false);
  const [deleteId, setDeleteId] = useState<string | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [impersonatingId, setImpersonatingId] = useState<string | null>(null);
  const [fetchError, setFetchError] = useState('');

  const fetchSchools = useCallback(async () => {
    setLoading(true);
    setFetchError('');
    const result = await apiFetchJson<{ items: School[] } | School[]>('/v1/admin/tenants');
    if (result.error) {
      setFetchError(result.error);
      setSchools([]);
    } else {
      const payload = result.data;
      const list = Array.isArray(payload)
        ? payload
        : (payload as { items: School[] })?.items ?? [];
      setSchools(list);
    }
    setLoading(false);
  }, []);

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

  // URL'den ?new=1 gelirse modal aç
  useEffect(() => {
    if (searchParams.get('new') === '1') {
      setModalOpen(true);
      router.replace('/platform/schools');
    }
  }, [searchParams, router]);

  const categoryFiltered = schools.filter((s) =>
    category === 'active' ? s.isActive : !s.isActive,
  );

  const filtered = categoryFiltered.filter(
    (s) =>
      s.name.toLowerCase().includes(search.toLowerCase()) ||
      s.slug.toLowerCase().includes(search.toLowerCase()) ||
      (s.email || '').toLowerCase().includes(search.toLowerCase()),
  );

  const activeCount = schools.filter((s) => s.isActive).length;
  const pendingCount = schools.filter((s) => !s.isActive).length;

  const handleDelete = async () => {
    if (!deleteId) return;
    setDeleting(true);
    const result = await apiFetchJson(`/v1/admin/tenants/${deleteId}`, { method: 'DELETE' });
    if (result.error) {
      alert(`Silme işlemi başarısız: ${result.error}`);
    } else {
      setSchools((prev) => prev.filter((s) => s.id !== deleteId));
    }
    setDeleting(false);
    setDeleteId(null);
  };

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

  return (
    <div className="space-y-5">
      <div className="rounded-2xl border border-slate-200 bg-gradient-to-r from-[#f8fafc] to-[#eef2ff] p-5">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.18em] text-indigo-500">Tenant Management</p>
            <h2 className="mt-1 text-xl font-semibold text-slate-900">Okullar</h2>
            <p className="mt-0.5 text-sm text-slate-600">
              {loading ? 'Yükleniyor...' : `${filtered.length} okul listeleniyor`}
            </p>
          </div>
          <button
            onClick={() => { setModalOpen(true); }}
            className="inline-flex items-center gap-2 rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800 shadow-sm"
          >
            <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
            </svg>
            Yeni Okul Ekle
          </button>
        </div>
      </div>

      <ListDataCard>
        <ListDataCardHeader>
          <ListDataCardTitleBlock
            title="Okul listesi"
            description={loading ? 'Yükleniyor…' : `${filtered.length} kayıt gösteriliyor (filtre + arama).`}
          />
          <ListDataCardToolbar>
            <TableToolbarSearch
              placeholder="Okul adı, slug veya e-posta ara…"
              value={search}
              onChange={(e) => setSearch(e.target.value)}
            />
            <div className="flex flex-wrap items-center gap-3">
              <TableSegmentGroup>
                <TableSegment active={category === 'active'} onClick={() => setCategory('active')}>
                  Aktif ({activeCount})
                </TableSegment>
                <TableSegment active={category === 'pending'} onClick={() => setCategory('pending')}>
                  Onay bekleyen ({pendingCount})
                </TableSegment>
              </TableSegmentGroup>
              <TableExportMenu />
              <TableDownloadAllButton />
            </div>
          </ListDataCardToolbar>
        </ListDataCardHeader>
        {!!fetchError && (
          <div className="border-b border-red-100 bg-red-50 px-5 py-3 text-sm text-red-700 dark:border-red-900/40 dark:bg-red-950/40 dark:text-red-200">
            {fetchError}
          </div>
        )}
        {loading ? (
          <div className="flex items-center justify-center py-20 text-zinc-400">
            <svg className="mr-2 h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
            </svg>
            Yükleniyor...
          </div>
        ) : filtered.length === 0 ? (
          <div className="py-20 text-center">
            <div className="mx-auto mb-3 text-4xl">🏫</div>
            <p className="font-medium text-zinc-700 dark:text-zinc-200">Okul bulunamadı</p>
            <p className="mt-1 text-sm text-zinc-400">
              {search ? 'Arama kriterini değiştirin' : 'İlk okulu eklemek için butona tıklayın'}
            </p>
          </div>
        ) : (
          <ListDataCardBody>
            <table className="w-full min-w-[720px] table-auto divide-y divide-zinc-200 text-sm dark:divide-zinc-800">
              <thead className="bg-zinc-50/95 dark:bg-zinc-900/90">
                <tr>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">Okul</th>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">Slug</th>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">İletişim</th>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">Şehir</th>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">Durum</th>
                  <th className="px-6 py-3 text-start text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">Kayıt</th>
                  <th className="px-6 py-3 text-end text-xs font-semibold tracking-wide text-zinc-900 uppercase dark:text-zinc-100">İşlem</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-200 dark:divide-zinc-800">
                {filtered.map((school) => (
                  <tr
                    key={school.id}
                    className="bg-white transition-colors hover:bg-zinc-50/90 dark:bg-zinc-950/25 dark:hover:bg-zinc-900/55"
                  >
                    <td className="px-6 py-2">
                      <div className="flex items-center gap-3">
                        <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-violet-100 text-base font-semibold text-violet-700">
                          {school.name[0]?.toUpperCase()}
                        </div>
                        <div>
                          <p className="font-semibold text-zinc-900 dark:text-zinc-100">{school.name}</p>
                          {school._count && (
                            <p className="text-xs text-zinc-500 dark:text-zinc-400">
                              {school._count.students} öğrenci · {school._count.staff} personel
                            </p>
                          )}
                        </div>
                      </div>
                    </td>
                    <td className="px-6 py-2">
                      <code className="rounded-md bg-zinc-100 px-2 py-0.5 text-xs text-zinc-700 dark:bg-zinc-800 dark:text-zinc-200">
                        {school.slug}
                      </code>
                    </td>
                    <td className="px-6 py-2">
                      <p className="text-zinc-800 dark:text-zinc-200">{school.email}</p>
                      {school.phone && <p className="text-xs text-zinc-500 dark:text-zinc-400">{school.phone}</p>}
                    </td>
                    <td className="px-6 py-2 text-zinc-600 dark:text-zinc-300">{school.city || '—'}</td>
                    <td className="px-6 py-2">
                      <span className={`inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ${
                        school.isActive
                          ? 'bg-green-50 text-green-700'
                          : 'bg-red-50 text-red-700'
                      }`}>
                        <span className={`h-1.5 w-1.5 rounded-full ${school.isActive ? 'bg-green-500' : 'bg-red-500'}`} />
                        {school.isActive ? 'Aktif' : 'Pasif'}
                      </span>
                    </td>
                    <td className="px-6 py-2 text-zinc-500 dark:text-zinc-400">
                      {new Date(school.createdAt).toLocaleDateString('tr-TR')}
                    </td>
                    <td className="px-6 py-2 text-end">
                      <div className="flex items-center justify-end gap-1">
                        <Link
                          href={`/platform/schools/${school.id}`}
                          className="rounded-lg p-2 text-gray-400 transition hover:bg-violet-50 hover:text-violet-600"
                          title="Düzenle"
                        >
                          <svg className="h-4 w-4" 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>
                        </Link>
                        <button
                          onClick={() => handleImpersonate(school.id)}
                          disabled={impersonatingId === school.id}
                          className="rounded-lg p-2 text-gray-400 transition hover:bg-indigo-50 hover:text-indigo-600 disabled:opacity-50"
                          title="Login As (Taklit Et)"
                        >
                          <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>
                        </button>
                        <button
                          onClick={() => setDeleteId(school.id)}
                          className="rounded-lg p-2 text-gray-400 transition hover:bg-red-50 hover:text-red-600"
                          title="Sil"
                        >
                          <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>
                        </button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </ListDataCardBody>
        )}
      </ListDataCard>

      {/* School Modal */}
      {modalOpen && (
        <SchoolModal
          school={null}
          onClose={() => { setModalOpen(false); }}
          onSave={(saved) => {
            setSchools((prev) => [saved, ...prev]);
            setModalOpen(false);
          }}
        />
      )}

      {/* Delete Confirm */}
      {deleteId && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
          <div className="w-full max-w-sm rounded-2xl bg-white p-6 shadow-xl">
            <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
              <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-gray-900">Okulu Sil</h3>
            <p className="mt-2 text-sm text-gray-500">
              Bu okulu silmek istediğinizden emin misiniz? Bu işlem geri alınamaz.
            </p>
            <div className="mt-6 flex gap-3">
              <button
                onClick={() => setDeleteId(null)}
                className="flex-1 rounded-xl border border-slate-200 py-2.5 text-sm font-medium text-gray-700 transition hover:bg-slate-50"
              >
                İptal
              </button>
              <button
                onClick={handleDelete}
                disabled={deleting}
                className="flex-1 rounded-xl bg-red-600 py-2.5 text-sm font-semibold text-white transition hover:bg-red-700 disabled:opacity-50"
              >
                {deleting ? 'Siliniyor...' : 'Evet, Sil'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}