'use client';

import { useEffect, useState } from 'react';

type Player = {
  id: string;
  first_name: string;
  last_name: string;
  position: string;
  team: string;
  status: string;
};

type DoctorNote = {
  doctor_name: string;
  rating: string;
  explanation: string;
};

const POSITIONS = ['QB', 'RB', 'WR', 'TE', 'FLEX', 'K', 'DEF'];
const DOCTORS = ['Gabriel', 'Jimmy', 'Mikey', 'Tekky'];

const SUPABASE_URL = 'https://ebdnuydfgbzhlvkaxrvj.supabase.co';
const SUPABASE_KEY = 'sb_publishable_4b1DqAbsw88I9pQV0qM90A_iWQcT4Qe';

export default function Home() {
  const [currentView, setCurrentView] = useState<'landing' | 'clinic'>('landing');
  const [authModalOpen, setAuthModalOpen] = useState(false);
  const [activeDoctor, setActiveDoctor] = useState<string | null>(null);

  const [activeTab, setActiveTab] = useState('QB');
  const [players, setPlayers] = useState<Player[]>([]);
  const [selectedPlayerId, setSelectedPlayerId] = useState<string>('');
  const [loading, setLoading] = useState(true);

  const [doctorNotes, setDoctorNotes] = useState<Record<string, DoctorNote>>({});
  const [editingRating, setEditingRating] = useState('DRAFT');
  const [editingExplanation, setEditingExplanation] = useState('');

  // Fetch players using Supabase REST API
  useEffect(() => {
    if (currentView !== 'clinic') return;

    async function fetchPlayers() {
      setLoading(true);
      let url = `${SUPABASE_URL}/rest/v1/players?select=*`;
      
      if (activeTab === 'FLEX') {
        url += `&position=in.(RB,WR,TE)`;
      } else {
        url += `&position=eq.${activeTab}`;
      }
      url += `&limit=200`;

      try {
        const res = await fetch(url, {
          headers: {
            'apikey': SUPABASE_KEY,
            'Authorization': `Bearer ${SUPABASE_KEY}`
          }
        });
        const data = await res.json();
        if (Array.isArray(data) && data.length > 0) {
          setPlayers(data);
          setSelectedPlayerId(data[0].id);
        } else {
          setPlayers([]);
          setSelectedPlayerId('');
        }
      } catch (err) {
        console.error('Error fetching players:', err);
      }
      setLoading(false);
    }
    fetchPlayers();
  }, [activeTab, currentView]);

  // Fetch doctor notes and votes when player changes
  useEffect(() => {
    if (!selectedPlayerId) return;

    async function fetchNotes() {
      try {
        const res = await fetch(`${SUPABASE_URL}/rest/v1/doctor_notes?player_id=eq.${selectedPlayerId}&select=doctor_name,rating,explanation`, {
          headers: {
            'apikey': SUPABASE_KEY,
            'Authorization': `Bearer ${SUPABASE_KEY}`
          }
        });
        const data = await res.json();

        const notesMap: Record<string, DoctorNote> = {};
        if (Array.isArray(data)) {
          data.forEach((note: DoctorNote) => {
            notesMap[note.doctor_name] = note;
          });
        }
        setDoctorNotes(notesMap);

        if (activeDoctor && notesMap[activeDoctor]) {
          setEditingRating(notesMap[activeDoctor].rating);
          setEditingExplanation(notesMap[activeDoctor].explanation);
        } else {
          setEditingRating('DRAFT');
          setEditingExplanation('');
        }
      } catch (err) {
        console.error('Error fetching notes:', err);
      }
    }
    fetchNotes();
  }, [selectedPlayerId, activeDoctor]);

  const handleSaveNote = async (ratingToSave: string) => {
    if (!activeDoctor || !selectedPlayerId) {
      setAuthModalOpen(true);
      return;
    }

    setEditingRating(ratingToSave);
    const explanationToSave = editingExplanation || 'No diagnostic notes logged.';

    try {
      // Upsert doctor vote
      await fetch(`${SUPABASE_URL}/rest/v1/doctor_votes`, {
        method: 'POST',
        headers: {
          'apikey': SUPABASE_KEY,
          'Authorization': `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json',
          'Prefer': 'resolution=merge-duplicates'
        },
        body: JSON.stringify({ player_id: selectedPlayerId, doctor_name: activeDoctor, verdict: ratingToSave })
      });

      // Upsert doctor notes
      await fetch(`${SUPABASE_URL}/rest/v1/doctor_notes`, {
        method: 'POST',
        headers: {
          'apikey': SUPABASE_KEY,
          'Authorization': `Bearer ${SUPABASE_KEY}`,
          'Content-Type': 'application/json',
          'Prefer': 'resolution=merge-duplicates'
        },
        body: JSON.stringify({ 
          player_id: selectedPlayerId, 
          doctor_name: activeDoctor, 
          rating: ratingToSave, 
          explanation: explanationToSave 
        })
      });

      setDoctorNotes((prev) => ({
        ...prev,
        [activeDoctor]: { doctor_name: activeDoctor, rating: ratingToSave, explanation: explanationToSave }
      }));
    } catch (err) {
      console.error('Error saving vote/note:', err);
    }
  };

  const selectedPlayer = players.find((p) => p.id === selectedPlayerId);

  return (
    <main className="min-h-screen bg-black text-white font-sans selection:bg-zinc-800 flex flex-col">
      
      {/* VIEW 1: LANDING PAGE */}
      {currentView === 'landing' && (
        <div className="min-h-screen flex flex-col">
          <nav className="sticky top-0 z-50 bg-black/70 backdrop-blur-md border-b border-zinc-800/80">
            <div className="max-w-7xl mx-auto px-6 lg:px-12 h-20 flex justify-between items-center">
              <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setCurrentView('landing')}>
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-600 to-amber-500 flex items-center justify-center font-black text-white shadow-lg">
                  🩺
                </div>
                <div>
                  <h1 className="font-black text-lg tracking-tight uppercase">ROSTER <span className="text-red-600">DOCTORS</span></h1>
                  <p className="text-[10px] text-zinc-400 font-mono uppercase tracking-widest">Diagnostic Suite v2.0</p>
                </div>
              </div>
              <button 
                onClick={() => setAuthModalOpen(true)}
                className="bg-gradient-to-r from-red-600 to-amber-500 hover:opacity-95 text-white font-bold px-6 py-2.5 rounded-full text-xs tracking-wider uppercase transition-all shadow-lg shadow-red-500/20 cursor-pointer"
              >
                Enter The Clinic →
              </button>
            </div>
          </nav>

          <main className="flex-grow max-w-6xl w-full mx-auto px-6 lg:px-12 py-16 flex flex-col justify-center items-center text-center space-y-10">
            <div className="space-y-4 max-w-3xl">
              <div className="inline-flex items-center gap-2 bg-zinc-900 border border-zinc-800 px-4 py-1.5 rounded-full text-xs font-mono text-zinc-400">
                <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span> Professional Dynasty Medical Board
              </div>
              <h1 className="text-5xl sm:text-7xl font-black tracking-tight text-white leading-none">
                Diagnose. Draft. <span className="bg-gradient-to-r from-red-500 to-amber-500 bg-clip-text text-transparent">Dominate.</span>
              </h1>
              <p className="text-base sm:text-lg text-zinc-400 font-normal leading-relaxed">
                Welcome to Roster Doctors. The definitive clinical audit suite for high-stakes dynasty fantasy football leagues. Review player medicals, record clinical diagnosis notes, and sync collective expert verdicts across the board.
              </p>
            </div>

            <div className="flex flex-wrap justify-center gap-4">
              <button 
                onClick={() => setAuthModalOpen(true)}
                className="px-8 py-4 bg-zinc-100 hover:bg-white text-zinc-950 font-bold rounded-2xl text-sm tracking-wider uppercase transition-all shadow-xl flex items-center gap-3 cursor-pointer"
              >
                🏥 Launch Clinic Workspace
              </button>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full pt-8 text-left">
              <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-3xl space-y-3">
                <div className="w-10 h-10 rounded-xl bg-red-600/10 border border-red-600/30 flex items-center justify-center text-red-500 font-bold">👨‍⚕️</div>
                <h3 className="text-lg font-bold text-white">Multi-Doctor Panel</h3>
                <p className="text-xs text-zinc-400 leading-relaxed">Clock in as Dr. Gabriel, Jimmy, Mikey, or Tekky to lock in distinct team medical evaluations and notes.</p>
              </div>

              <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-3xl space-y-3">
                <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400 font-bold">📋</div>
                <h3 className="text-lg font-bold text-white">Consensus Verdicts</h3>
                <p className="text-xs text-zinc-400 leading-relaxed">Evaluate prospects instantly with real-time DRAFT, STASH, or FADE ratings synced securely.</p>
              </div>

              <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-3xl space-y-3">
                <div className="w-10 h-10 rounded-xl bg-emerald-500/10 border border-emerald-500/30 flex items-center justify-center text-emerald-400 font-bold">⚡</div>
                <h3 className="text-lg font-bold text-white">Live Search & Roster</h3>
                <p className="text-xs text-zinc-400 leading-relaxed">Filter through complete positional depth charts and rookie classes instantly on the fly.</p>
              </div>
            </div>
          </main>
        </div>
      )}

      {/* VIEW 2: CLINIC WORKSPACE */}
      {currentView === 'clinic' && (
        <div className="min-h-screen flex flex-col">
          <nav className="sticky top-0 z-50 bg-black/70 backdrop-blur-md border-b border-zinc-800/80">
            <div className="max-w-7xl mx-auto px-6 lg:px-12 h-20 flex justify-between items-center">
              <div className="flex items-center space-x-3 cursor-pointer" onClick={() => setCurrentView('landing')}>
                <div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-600 to-amber-500 flex items-center justify-center font-black text-white shadow-lg">
                  🩺
                </div>
                <div>
                  <h1 className="font-black text-lg tracking-tight uppercase">ROSTER <span className="text-red-600">DOCTORS</span></h1>
                  <p className="text-[10px] text-zinc-400 font-mono uppercase tracking-widest">Diagnostic Suite v2.0</p>
                </div>
              </div>

              <div className="flex items-center gap-4">
                <button onClick={() => setCurrentView('landing')} className="text-xs text-zinc-400 hover:text-white font-medium mr-2 cursor-pointer">
                  🏠 Home
                </button>
                {activeDoctor ? (
                  <div className="flex items-center gap-3 bg-zinc-900 border border-zinc-800 py-2 px-4 rounded-2xl">
                    <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                    <span className="text-sm font-semibold text-white">Dr. {activeDoctor}</span>
                    <button onClick={() => setActiveDoctor(null)} className="text-xs text-zinc-400 hover:text-white ml-2 underline cursor-pointer">Sign Out</button>
                  </div>
                ) : (
                  <button onClick={() => setAuthModalOpen(true)} className="bg-zinc-100 hover:bg-white text-zinc-900 font-bold px-5 py-2.5 rounded-full text-xs tracking-wider uppercase transition-colors shadow-sm cursor-pointer">
                    Doctor Portal →
                  </button>
                )}
              </div>
            </div>
          </nav>

          <main className="flex-grow max-w-7xl w-full mx-auto px-6 lg:px-12 py-10 space-y-8">
            <div className="bg-zinc-900/60 border border-zinc-800 p-6 sm:p-8 rounded-3xl space-y-6 backdrop-blur-md">
              <div className="flex gap-2 overflow-x-auto pb-2 scrollbar-hide">
                {POSITIONS.map((pos) => (
                  <button
                    key={pos}
                    onClick={() => setActiveTab(pos)}
                    className={`px-5 py-2.5 rounded-xl text-xs font-black tracking-wider uppercase transition-all whitespace-nowrap cursor-pointer ${
                      activeTab === pos ? 'bg-white text-black shadow-md' : 'bg-zinc-900 text-zinc-400 hover:text-white border border-zinc-800'
                    }`}
                  >
                    {pos}
                  </button>
                ))}
              </div>

              <div className="space-y-2">
                <label className="text-xs font-semibold uppercase tracking-widest text-zinc-400">Select {activeTab} Prospect / Player</label>
                {loading ? (
                  <div className="text-zinc-500 text-sm py-3">Loading roster database...</div>
                ) : (
                  <div className="relative">
                    <select
                      value={selectedPlayerId}
                      onChange={(e) => setSelectedPlayerId(e.target.value)}
                      className="w-full bg-black border border-zinc-700/80 rounded-2xl px-5 py-4 text-sm sm:text-base font-semibold text-white focus:outline-none focus:border-zinc-400 transition-colors cursor-pointer appearance-none"
                    >
                      {players.map((p) => (
                        <option key={p.id} value={p.id}>
                          {p.first_name} {p.last_name} — {p.team || 'FA'} ({p.status || 'Active'})
                        </option>
                      ))}
                    </select>
                  </div>
                )}
              </div>
            </div>

            {selectedPlayer && (
              <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div className="bg-zinc-900/40 border border-zinc-800 p-8 rounded-3xl flex flex-col items-center text-center space-y-6 backdrop-blur-xl">
                  <div className="relative">
                    <div className="w-36 h-36 rounded-full overflow-hidden bg-zinc-950 border-2 border-zinc-700 shadow-2xl flex items-center justify-center relative z-10">
                      <img 
                        src={selectedPlayer.position === 'DEF' ? `https://sleepercdn.com/images/team_logos/nfl/${selectedPlayer.id.toLowerCase()}.png` : `https://sleepercdn.com/content/nfl/players/${selectedPlayer.id}.jpg`} 
                        alt="Player" 
                        className="w-full h-full object-cover"
                        onError={(e) => {
                          (e.target as HTMLElement).style.display = 'none';
                        }}
                      />
                    </div>
                  </div>

                  <div>
                    <h2 className="text-2xl font-bold tracking-tight text-white">{selectedPlayer.first_name} {selectedPlayer.last_name}</h2>
                    <div className="flex items-center justify-center gap-2 mt-2">
                      <span className="text-xs font-black bg-white text-black px-2.5 py-0.5 rounded">{selectedPlayer.team || 'FA'}</span>
                      <span className="text-xs text-zinc-400 font-medium uppercase tracking-wider">{selectedPlayer.position} • {selectedPlayer.status || 'Active'}</span>
                    </div>
                  </div>

                  <div className={`w-full pt-6 border-t border-zinc-800 space-y-4 text-left ${activeDoctor ? '' : 'opacity-40 pointer-events-none'}`}>
                    <div className="flex justify-between items-center">
                      <span className="text-xs font-semibold uppercase tracking-widest text-zinc-400">
                        {activeDoctor ? `Dr. ${activeDoctor}'s Verdict` : 'Sign in to log verdict'}
                      </span>
                    </div>

                    <div className="grid grid-cols-3 gap-2">
                      <button 
                        onClick={() => handleSaveNote('DRAFT')}
                        className={`py-2.5 rounded-xl text-xs font-black tracking-wider transition-all cursor-pointer ${
                          editingRating === 'DRAFT' ? 'bg-green-500 text-black shadow-lg shadow-green-500/25 border border-green-500' : 'bg-green-500/10 text-green-400 border border-green-500/20'
                        }`}
                      >
                        DRAFT
                      </button>
                      <button 
                        onClick={() => handleSaveNote('STASH')}
                        className={`py-2.5 rounded-xl text-xs font-black tracking-wider transition-all cursor-pointer ${
                          editingRating === 'STASH' ? 'bg-yellow-500 text-black shadow-lg shadow-yellow-500/25 border border-yellow-500' : 'bg-yellow-500/10 text-yellow-400 border border-yellow-500/20'
                        }`}
                      >
                        STASH
                      </button>
                      <button 
                        onClick={() => handleSaveNote('FADE')}
                        className={`py-2.5 rounded-xl text-xs font-black tracking-wider transition-all cursor-pointer ${
                          editingRating === 'FADE' ? 'bg-red-500 text-white shadow-lg shadow-red-500/25 border border-red-500' : 'bg-red-500/10 text-red-400 border border-red-500/20'
                        }`}
                      >
                        FADE
                      </button>
                    </div>

                    <div className="space-y-2 pt-2">
                      <label className="text-xs text-zinc-400 font-medium">Clinical Explanation / Notes:</label>
                      <textarea 
                        rows={3} 
                        placeholder="Enter rationale and diagnostic notes..."
                        value={editingExplanation}
                        onChange={(e) => setEditingExplanation(e.target.value)}
                        className="w-full bg-black border border-zinc-800 rounded-xl p-3 text-sm text-white placeholder-zinc-600 focus:outline-none focus:border-zinc-500 resize-none"
                      />
                      <button 
                        onClick={() => handleSaveNote(editingRating)}
                        className="w-full py-2.5 bg-zinc-800 hover:bg-zinc-700 text-zinc-200 text-xs font-bold rounded-xl transition-colors cursor-pointer"
                      >
                        Publish Clinical Notes
                      </button>
                    </div>
                  </div>
                </div>

                <div className="lg:col-span-2 space-y-4">
                  <div className="flex justify-between items-center mb-2">
                    <h3 className="text-xl font-bold tracking-tight text-white">Doctor Panel Consensus</h3>
                    <span className="text-xs text-zinc-500 font-mono">Synced Live</span>
                  </div>

                  <div className="space-y-4">
                    {DOCTORS.map((doc) => {
                      const note = doctorNotes[doc];
                      const rating = note ? note.rating : 'PENDING';
                      
                      let badgeClass = 'bg-zinc-800 text-zinc-400 border-zinc-700';
                      if (rating === 'DRAFT') badgeClass = 'bg-green-500/20 text-green-400 border-green-500/40';
                      if (rating === 'STASH') badgeClass = 'bg-yellow-500/20 text-yellow-400 border-yellow-500/40';
                      if (rating === 'FADE') badgeClass = 'bg-red-500/20 text-red-400 border-red-500/40';

                      return (
                        <div key={doc} className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3 backdrop-blur-md">
                          <div className="flex items-center justify-between">
                            <h4 className="text-base font-bold text-white flex items-center gap-2">
                              <span className="w-2 h-2 rounded-full bg-zinc-600"></span> Dr. {doc}
                            </h4>
                            <span className={`px-3 py-1 rounded-lg text-xs font-black border tracking-widest ${badgeClass}`}>
                              {rating}
                            </span>
                          </div>
                          <p className="text-sm text-zinc-300 leading-relaxed bg-black/40 p-4 rounded-2xl border border-zinc-800/50">
                            {note?.explanation || <span className="text-zinc-600 italic">No diagnostic notes recorded yet by Dr. {doc}.</span>}
                          </p>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>
            )}
          </main>
        </div>
      )}

      {/* AUTH MODAL */}
      {authModalOpen && (
        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/80 backdrop-blur-md p-4">
          <div className="w-full max-w-md bg-zinc-900 border border-zinc-800 rounded-3xl p-8 shadow-2xl relative">
            <button 
              onClick={() => setAuthModalOpen(false)} 
              className="absolute top-6 right-6 text-zinc-500 hover:text-white text-lg cursor-pointer"
            >
              ✕
            </button>
            <div className="flex items-center space-x-3 mb-6">
              <div className="w-10 h-10 rounded-xl bg-amber-500/10 border border-amber-500/30 flex items-center justify-center text-amber-400">
                👨‍⚕️
              </div>
              <div>
                <h3 className="text-xl font-bold tracking-tight text-white">Clock In</h3>
                <p className="text-xs text-zinc-400">Select your active Doctor profile</p>
              </div>
            </div>
            
            <div className="space-y-2.5">
              {DOCTORS.map((doc) => (
                <button 
                  key={doc}
                  onClick={() => {
                    setActiveDoctor(doc);
                    setAuthModalOpen(false);
                    setCurrentView('clinic');
                  }} 
                  className="w-full p-4 rounded-2xl bg-zinc-800/50 hover:bg-zinc-800 border border-zinc-700/50 hover:border-zinc-600 text-left font-semibold text-zinc-200 transition-all flex justify-between items-center cursor-pointer"
                >
                  <span>Dr. {doc}</span>
                  <span className="text-xs text-zinc-500">→</span>
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      <footer className="border-t border-zinc-900 mt-auto py-8 text-center text-xs text-zinc-600 font-mono">
        &copy; 2026 ROSTER DOCTORS // ALL RIGHTS RESERVED.
      </footer>
    </main>
  );
}
```eof