'use client';

import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { ArrowLeft, Building2 } from 'lucide-react';
import type { AdminClient } from '@/store/slices/adminSlice';

export default function ClientDetailPage() {
  const params = useParams();
  const clientId = params.id as string;
  const [client, setClient] = useState<AdminClient | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchClient = async () => {
      try {
        const res = await fetch(`/api/v1/admin/clients/${clientId}`);
        if (res.ok) setClient(await res.json());
      } finally {
        setLoading(false);
      }
    };
    fetchClient();
  }, [clientId]);

  if (loading) {
    return (
      <div className="space-y-4">
        <div className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
        <div className="h-64 bg-gray-200 rounded animate-pulse" />
      </div>
    );
  }

  if (!client) {
    return <p className="text-gray-500">Client not found.</p>;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-3">
        <Link href="/admin/clients">
          <Button variant="ghost" size="sm">
            <ArrowLeft className="w-4 h-4 mr-1" />Back
          </Button>
        </Link>
        <Building2 className="w-6 h-6 text-[#5146E5]" />
        <h1 className="text-2xl font-semibold">{client.name}</h1>
        <span className={`text-xs px-2 py-0.5 rounded-full ${client.is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
          {client.is_active ? 'Active' : 'Inactive'}
        </span>
      </div>

      <Tabs defaultValue="overview">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="teams">Teams</TabsTrigger>
          <TabsTrigger value="master-decks">Master Decks</TabsTrigger>
          <TabsTrigger value="brand">Brand Config</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-4">
          <div className="bg-white rounded-lg border p-6">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-gray-500">Slug</p>
                <p className="font-medium">/{client.slug}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">Review Policy</p>
                <p className="font-medium">{client.review_policy}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">Retention</p>
                <p className="font-medium">{client.retention_days ? `${client.retention_days} days` : 'Unlimited'}</p>
              </div>
              <div>
                <p className="text-sm text-gray-500">Created</p>
                <p className="font-medium">{client.created_at ? new Date(client.created_at).toLocaleDateString() : '—'}</p>
              </div>
            </div>
          </div>
        </TabsContent>

        <TabsContent value="teams" className="mt-4">
          <Link href={`/admin/clients/${clientId}/teams`}>
            <Button variant="outline">Manage Teams</Button>
          </Link>
        </TabsContent>

        <TabsContent value="master-decks" className="mt-4">
          <Link href={`/admin/clients/${clientId}/master-decks`}>
            <Button variant="outline">Manage Master Decks</Button>
          </Link>
        </TabsContent>

        <TabsContent value="brand" className="mt-4">
          <Link href={`/admin/clients/${clientId}/brand`}>
            <Button variant="outline">Manage Brand Config</Button>
          </Link>
        </TabsContent>
      </Tabs>
    </div>
  );
}
