'use client';

import { use, useEffect, useState } from 'react';
import { apiFetchJson } from '@/lib/auth';
import { PageHeader } from '@/components/school/page-header';
import { BranchGallery } from '@/components/school/branch-gallery';
import { ComponentCard } from '@/components/school/component-card';
import { MapPin, Phone, Mail, Building2, ChevronLeft, UserCircle } from 'lucide-react';
import Link from 'next/link';

type Branch = {
  id: string;
  name: string;
  address?: string | null;
  phone?: string | null;
  email?: string | null;
  manager?: { id: string; fullName: string } | null;
  galleryImages?: string[] | null;
};

export default function BranchDetailPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const [branch, setBranch] = useState<Branch | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const loadBranch = async () => {
      setLoading(true);
      setError('');
      const res = await apiFetchJson<Branch>(`/v1/admin/branches/${id}`);
      if (res.error) {
        setError(res.error);
        setBranch(null);
      } else {
        setBranch(res.data);
      }
      setLoading(false);
    };

    loadBranch();
  }, [id]);

  if (loading) {
    return (
      <div className="space-y-6 pb-8">
        <PageHeader
          eyebrow="Yapı"
          title="Şube Detayı"
          description="Şube detaylarını görüntüleyin."
        />
        <div className="space-y-4">
          <div className="h-6 animate-pulse rounded-lg bg-slate-100 dark:bg-zinc-800" />
          <div className="h-6 animate-pulse rounded-lg bg-slate-100 dark:bg-zinc-800" />
          <div className="h-6 animate-pulse rounded-lg bg-slate-100 dark:bg-zinc-800" />
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-6 pb-8">
        <PageHeader
          eyebrow="Yapı"
          title="Şube Detayı"
          description="Şube detaylarını görüntüleyin."
        />
        <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>
      </div>
    );
  }

  if (!branch) {
    return (
      <div className="space-y-6 pb-8">
        <PageHeader
          eyebrow="Yapı"
          title="Şube Detayı"
          description="Şube detaylarını görüntüleyin."
        />
        <p className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300">
          Şube bulunamadı.
        </p>
      </div>
    );
  }

  return (
    <div className="space-y-6 pb-8">
      <PageHeader
        eyebrow="Yapı"
        title={branch.name}
        description="Şube detaylarını görüntüleyin."
      />

      <div className="flex items-center gap-2">
        <Link
          href="/school/branches"
          className="flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700 dark:text-zinc-400 dark:hover:text-zinc-300"
        >
          <ChevronLeft size={14} strokeWidth={2} />
          Şubeler
        </Link>
      </div>

      <ComponentCard title="Şube Bilgileri">
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
          {branch.address && (
            <div>
              <p className="text-sm text-slate-500 dark:text-zinc-400">Adres</p>
              <p className="flex items-start gap-2 text-sm">
                <MapPin size={14} strokeWidth={2} className="mt-0.5 flex-shrink-0 text-slate-400" />
                <span>{branch.address}</span>
              </p>
            </div>
          )}
          {branch.phone && (
            <div>
              <p className="text-sm text-slate-500 dark:text-zinc-400">Telefon</p>
              <p className="flex items-start gap-2 text-sm">
                <Phone size={14} strokeWidth={2} className="mt-0.5 flex-shrink-0 text-slate-400" />
                <span>{branch.phone}</span>
              </p>
            </div>
          )}
          {branch.email && (
            <div>
              <p className="text-sm text-slate-500 dark:text-zinc-400">E-posta</p>
              <p className="flex items-start gap-2 text-sm">
                <Building2 size={14} strokeWidth={2} className="mt-0.5 flex-shrink-0 text-slate-400" />
                <span>{branch.email}</span>
              </p>
            </div>
          )}
          {branch.manager && (
            <div>
              <p className="text-sm text-slate-500 dark:text-zinc-400">Yönetici</p>
              <p className="flex items-start gap-2 text-sm">
                <UserCircle size={14} strokeWidth={2} className="mt-0.5 flex-shrink-0 text-slate-400" />
                <span>{branch.manager.fullName}</span>
              </p>
            </div>
          )}
        </div>
      </ComponentCard>

      <ComponentCard title="Galeri">
        <BranchGallery images={branch.galleryImages} />
      </ComponentCard>
    </div>
  );
}