'use client';
import { useEffect, useState } from 'react';
import { useParams } from 'next/navigation';
import InterviewInterface from '@/components/InterviewInterface';
import { clients, type Client } from '@/utils/api';
import toast from 'react-hot-toast';

export default function PublicInterviewPage() {
  const { uniqueLink } = useParams<{ uniqueLink: string }>();
  const [client, setClient] = useState<Client | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const load = async () => {
      try {
        const { client: c } = await clients.getByLink(uniqueLink);
        setClient(c);
      } catch (err: any) {
        setError(err.message || 'Interview not found');
        toast.error('Interview not found');
      } finally {
        setLoading(false);
      }
    };
    load();
  }, [uniqueLink]);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-primary)' }}>
        <div className="flex gap-1.5">
          <div className="typing-dot" />
          <div className="typing-dot" style={{ animationDelay: '0.2s' }} />
          <div className="typing-dot" style={{ animationDelay: '0.4s' }} />
        </div>
      </div>
    );
  }

  if (error || !client) {
    return (
      <div className="min-h-screen flex items-center justify-center" style={{ background: 'var(--bg-primary)' }}>
        <div className="text-center">
          <p className="text-2xl mb-2">😕</p>
          <p className="font-semibold" style={{ color: 'var(--text-primary)' }}>Interview not found</p>
          <p className="text-sm mt-1" style={{ color: 'var(--text-secondary)' }}>This link may be invalid or expired.</p>
        </div>
      </div>
    );
  }

  return (
    <InterviewInterface
      client={client}
      user={null}
      onBack={() => window.close()}
      onClientUpdate={setClient}
    />
  );
}