'use client';

import { useState, useEffect } from 'react';

interface University {
  id: string;
  name: string;
  slug: string;
  domain: string;
  subdomain: string;
  branding: any;
  contact: any;
  features: any;
  ai: any;
}

interface Content {
  id: string;
  title: string;
  titleAr: string;
  contentType: string;
  content: string;
  contentAr: string;
  isPublished: boolean;
  universityId: string;
}

interface Program {
  id: string;
  title: string;
  titleAr: string;
  level: string;
  duration: string;
  fees: string;
  entryRequirements: string;
  universityId: string;
}

export default function DemoPage() {
  const [universities, setUniversities] = useState<University[]>([]);
  const [content, setContent] = useState<Content[]>([]);
  const [programs, setPrograms] = useState<Program[]>([]);
  const [selectedUniversity, setSelectedUniversity] = useState<string>('');
  const [loading, setLoading] = useState(true);

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

  const fetchData = async () => {
    try {
      const [unisRes, contentRes, programsRes] = await Promise.all([
        fetch('/api/universities'),
        fetch('/api/content'),
        fetch('/api/programs')
      ]);

      const unisData = await unisRes.json();
      const contentData = await contentRes.json();
      const programsData = await programsRes.json();

      setUniversities(unisData.data);
      setContent(contentData.data);
      setPrograms(programsData.data);
      setSelectedUniversity(unisData.data[0]?.id || '');
    } catch (error) {
      console.error('Error fetching data:', error);
    } finally {
      setLoading(false);
    }
  };

  const selectedUni = universities.find(u => u.id === selectedUniversity);
  const universityContent = content.filter(c => c.universityId === selectedUniversity);
  const universityPrograms = programs.filter(p => p.universityId === selectedUniversity);

  if (loading) {
    return (
      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-lg text-gray-600">Loading demo data...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      {/* Header */}
      <div className="bg-white shadow-lg">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <h1 className="text-4xl font-bold text-gray-900 mb-2">
            🎓 White-Label University Portal Demo
          </h1>
          <p className="text-xl text-gray-600">
            Multi-Tenant Architecture with Real Database Data
          </p>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* University Selector */}
        <div className="bg-white rounded-lg shadow-md p-6 mb-8">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">
            🏫 Select University (Multi-Tenant Demo)
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {universities.map((uni) => (
              <div
                key={uni.id}
                onClick={() => setSelectedUniversity(uni.id)}
                className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${
                  selectedUniversity === uni.id
                    ? 'border-blue-500 bg-blue-50'
                    : 'border-gray-200 hover:border-blue-300'
                }`}
              >
                <h3 className="font-semibold text-lg text-gray-900">{uni.name}</h3>
                <p className="text-sm text-gray-600">Domain: {uni.domain}</p>
                <p className="text-sm text-gray-600">Subdomain: {uni.subdomain}</p>
                <div className="mt-2">
                  <span className="inline-block px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                    Active
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {selectedUni && (
          <>
            {/* University Info */}
            <div className="bg-white rounded-lg shadow-md p-6 mb-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                🎯 {selectedUni.name} - Configuration
              </h2>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Branding</h3>
                  <div className="space-y-2">
                    <p><span className="font-medium">Primary Color:</span> {selectedUni.branding.primaryColor}</p>
                    <p><span className="font-medium">Tagline:</span> {selectedUni.branding.tagline}</p>
                    <p><span className="font-medium">Theme:</span> {selectedUni.branding.theme}</p>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">Contact</h3>
                  <div className="space-y-2">
                    <p><span className="font-medium">Email:</span> {selectedUni.contact.email}</p>
                    <p><span className="font-medium">Phone:</span> {selectedUni.contact.phone}</p>
                    <p><span className="font-medium">Address:</span> {selectedUni.contact.address}</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Content */}
            <div className="bg-white rounded-lg shadow-md p-6 mb-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                📝 Content Management ({universityContent.length} items)
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {universityContent.map((item) => (
                  <div key={item.id} className="border rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-semibold text-gray-900">{item.title}</h3>
                      <span className="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">
                        {item.contentType}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-2">{item.content.substring(0, 100)}...</p>
                    <div className="flex items-center justify-between">
                      <span className="text-xs text-gray-500">
                        {item.isPublished ? '✅ Published' : '⏳ Draft'}
                      </span>
                      <span className="text-xs text-gray-500">Arabic: {item.titleAr ? '✅' : '❌'}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Programs */}
            <div className="bg-white rounded-lg shadow-md p-6 mb-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                🎓 Academic Programs ({universityPrograms.length} programs)
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {universityPrograms.map((program) => (
                  <div key={program.id} className="border rounded-lg p-4">
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-semibold text-gray-900">{program.title}</h3>
                      <span className="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">
                        {program.level}
                      </span>
                    </div>
                    <p className="text-sm text-gray-600 mb-2">{program.duration}</p>
                    <p className="text-sm font-medium text-gray-900 mb-2">Fees: {program.fees}</p>
                    <p className="text-xs text-gray-500">Arabic: {program.titleAr ? '✅' : '❌'}</p>
                  </div>
                ))}
              </div>
            </div>

            {/* AI Configuration */}
            <div className="bg-white rounded-lg shadow-md p-6 mb-8">
              <h2 className="text-2xl font-bold text-gray-900 mb-4">
                🤖 AI Configuration
              </h2>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">AI Settings</h3>
                  <div className="space-y-2">
                    <p><span className="font-medium">Provider:</span> {selectedUni.ai.provider}</p>
                    <p><span className="font-medium">Model:</span> {selectedUni.ai.model}</p>
                    <p><span className="font-medium">Languages:</span> {selectedUni.ai.personality.language.join(', ')}</p>
                  </div>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-gray-900 mb-3">University Context</h3>
                  <div className="space-y-2">
                    <p><span className="font-medium">Location:</span> {selectedUni.ai.universityContext.location}</p>
                    <p><span className="font-medium">Specializations:</span> {selectedUni.ai.universityContext.specializations.slice(0, 2).join(', ')}...</p>
                    <p><span className="font-medium">Research Areas:</span> {selectedUni.ai.universityContext.researchAreas.slice(0, 2).join(', ')}...</p>
                  </div>
                </div>
              </div>
            </div>
          </>
        )}

        {/* Demo Instructions */}
        <div className="bg-blue-50 rounded-lg p-6">
          <h2 className="text-2xl font-bold text-blue-900 mb-4">
            🚀 How This Multi-Tenant System Works
          </h2>
          <div className="space-y-4 text-blue-800">
            <div>
              <h3 className="font-semibold">1. Data Isolation</h3>
              <p>Each university has its own data - content, programs, and configuration are completely separated.</p>
            </div>
            <div>
              <h3 className="font-semibold">2. Dynamic Branding</h3>
              <p>Colors, logos, contact info, and AI personality are customized per university.</p>
            </div>
            <div>
              <h3 className="font-semibold">3. Multi-Language Support</h3>
              <p>All content supports both English and Arabic with RTL layout.</p>
            </div>
            <div>
              <h3 className="font-semibold">4. AI Customization</h3>
              <p>Each university has its own AI context, specializations, and knowledge base.</p>
            </div>
            <div>
              <h3 className="font-semibold">5. Domain Management</h3>
              <p>Each university can have custom domains and subdomains with SSL certificates.</p>
            </div>
          </div>
        </div>

        {/* Navigation */}
        <div className="mt-8 text-center">
          <a
            href="/admin"
            className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"
          >
            🛠️ Go to Admin Dashboard
          </a>
        </div>
      </div>
    </div>
  );
}