// web/src/components/RightPanel.tsx
import React, { useEffect, useRef, useState } from 'react';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { Label } from './ui/label';
import { Card } from './ui/card';
import { Separator } from './ui/separator';
import { Textarea } from './ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { LogIn, LogOut, FileText, MessageSquare, Download, ClipboardList, Sparkles, Volume2, Podcast } from 'lucide-react';
import type { User } from '../App';
import { toast } from 'sonner';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from './ui/dialog';

interface RightPanelProps {
  user: User | null;
  onLogin: (name: string, emailOrId: string) => void;
  onLogout: () => void;
  isLoggedIn: boolean;
  onClose?: () => void;

  exportResult: string;
  setExportResult: (result: string) => void;
  resultType: 'export' | 'quiz' | 'summary' | null;
  setResultType: (type: 'export' | 'quiz' | 'summary' | null) => void;

  // ✅ Actions buttons callbacks (来自 App.tsx)
  onExport: () => void;
  onQuiz: () => void;
  onSummary: () => void;
}

export function RightPanel({
  user,
  onLogin,
  onLogout,
  isLoggedIn,
  exportResult,
  setExportResult,
  resultType,
  setResultType,
  onExport,
  onQuiz,
  onSummary,
}: RightPanelProps) {
  const [showLoginForm, setShowLoginForm] = useState(false);
  const [name, setName] = useState('');
  const [emailOrId, setEmailOrId] = useState('');

  const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
  const [feedbackText, setFeedbackText] = useState('');
  const [feedbackCategory, setFeedbackCategory] = useState<'general' | 'bug' | 'feature'>('general');

  const [audioUrl, setAudioUrl] = useState<string | null>(null);
  const [loadingTts, setLoadingTts] = useState(false);
  const [loadingPodcast, setLoadingPodcast] = useState(false);
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    return () => {
      if (audioUrl) URL.revokeObjectURL(audioUrl);
    };
  }, [audioUrl]);

  async function postAudio(path: string, payload: any): Promise<Blob> {
    const res = await fetch(path, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    if (!res.ok) {
      const txt = await res.text().catch(() => '');
      throw new Error(`HTTP ${res.status}: ${txt || res.statusText}`);
    }
    return await res.blob();
  }

  const handleListenTts = async () => {
    if (!isLoggedIn || !user?.user_id || !exportResult?.trim()) return;
    if (audioUrl) URL.revokeObjectURL(audioUrl);
    setAudioUrl(null);
    try {
      setLoadingTts(true);
      toast.message('Generating speech…');
      const blob = await postAudio('/api/tts', { user_id: user.user_id, text: exportResult, voice: 'nova' });
      const url = URL.createObjectURL(blob);
      setAudioUrl(url);
      toast.success('Ready. Use the player below.');
      setTimeout(() => audioRef.current?.play(), 100);
    } catch (e) {
      console.error(e);
      toast.error(e instanceof Error ? e.message : 'TTS failed');
    } finally {
      setLoadingTts(false);
    }
  };

  const handleGeneratePodcast = async (source: 'summary' | 'conversation') => {
    if (!isLoggedIn || !user?.user_id) return;
    if (audioUrl) URL.revokeObjectURL(audioUrl);
    setAudioUrl(null);
    try {
      setLoadingPodcast(true);
      toast.message(source === 'summary' ? 'Generating podcast from summary…' : 'Generating podcast from conversation…');
      const blob = await postAudio('/api/podcast', { user_id: user.user_id, source, voice: 'nova' });
      const url = URL.createObjectURL(blob);
      setAudioUrl(url);
      toast.success('Podcast ready. Use the player below.');
      setTimeout(() => audioRef.current?.play(), 100);
    } catch (e) {
      console.error(e);
      toast.error(e instanceof Error ? e.message : 'Podcast failed');
    } finally {
      setLoadingPodcast(false);
    }
  };

  const handleLoginClick = () => {
    if (!name.trim() || !emailOrId.trim()) {
      toast.error('Please fill in all fields');
      return;
    }
    onLogin(name.trim(), emailOrId.trim());
    setShowLoginForm(false);
    setName('');
    setEmailOrId('');
  };

  const handleLogoutClick = () => {
    onLogout();
    setShowLoginForm(false);
  };

  const handleFeedbackSubmit = () => {
    if (!feedbackText.trim()) {
      toast.error('Please provide feedback text');
      return;
    }
    console.log('Feedback submitted:', feedbackText, feedbackCategory);
    setFeedbackDialogOpen(false);
    setFeedbackText('');
    toast.success('Feedback submitted!');
  };

  return (
    <div className="flex-1 overflow-auto p-4 space-y-4">
      {/* Account */}
      <Card className="p-4">
        {!isLoggedIn ? (
          <div className="space-y-4">
            <div className="flex flex-col items-center py-4">
              <h3 className="mb-2">Welcome to Clare!</h3>
              <p className="text-sm text-muted-foreground text-center mb-4">
                Log in to start your learning session
              </p>
            </div>

            {!showLoginForm ? (
              <Button onClick={() => setShowLoginForm(true)} className="w-full gap-2">
                <LogIn className="h-4 w-4" />
                Student Login
              </Button>
            ) : (
              <div className="space-y-3">
                <div className="space-y-2">
                  <Label htmlFor="name">Name</Label>
                  <Input
                    id="name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Enter your name"
                  />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="emailOrId">Email / Student ID</Label>
                  <Input
                    id="emailOrId"
                    value={emailOrId}
                    onChange={(e) => setEmailOrId(e.target.value)}
                    placeholder="Enter your email or ID"
                  />
                </div>
                <div className="flex gap-2">
                  <Button onClick={handleLoginClick} className="flex-1">
                    Enter
                  </Button>
                  <Button variant="outline" onClick={() => setShowLoginForm(false)}>
                    Cancel
                  </Button>
                </div>
              </div>
            )}
          </div>
        ) : (
          <div className="space-y-4">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-blue-500 flex items-center justify-center text-white">
                {user?.name?.charAt(0).toUpperCase()}
              </div>
              <div className="flex-1 min-w-0">
                <h4 className="truncate">{user?.name}</h4>
                <p className="text-sm text-muted-foreground truncate">{user?.email}</p>
                <p className="text-xs text-muted-foreground truncate">user_id: {user?.user_id}</p>
              </div>
            </div>

            <Button variant="destructive" onClick={handleLogoutClick} className="w-full gap-2">
              <LogOut className="h-4 w-4" />
              Log Out
            </Button>
          </div>
        )}
      </Card>

      {/* ✅ Actions：三按钮并排（同宽） */}
      {/* Actions */}
      {/* Actions */}
      <Card className="p-4">
        <div className="flex items-center justify-between mb-3">
          <h3 className="text-base font-medium">Actions TEST 123</h3>
        </div>
      
        {/* 强制一排三个：不用 grid，直接 flex，最稳 */}
        <div className="flex items-stretch gap-2">
          <Button
            variant="outline"
            onClick={onExport}
            disabled={!isLoggedIn}
            title="Export"
            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
          >
            <Download className="h-4 w-4" />
          </Button>
      
          <Button
            variant="outline"
            onClick={onQuiz}
            disabled={!isLoggedIn}
            title="Quiz"
            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
          >
            <ClipboardList className="h-4 w-4" />
          </Button>
      
          <Button
            variant="outline"
            onClick={onSummary}
            disabled={!isLoggedIn}
            title="Summary"
            className="flex-1 h-10 p-0 flex items-center justify-center rounded-xl"
          >
            <Sparkles className="h-4 w-4" />
          </Button>
        </div>
      </Card>


      <Separator />

      {/* Results */}
      <div className="space-y-3">
        <h3>
          {resultType === 'export' && 'Exported Conversation'}
          {resultType === 'quiz' && 'Micro-Quiz'}
          {resultType === 'summary' && 'Summarization'}
          {!resultType && 'Results'}
        </h3>

        <Card className="p-4 min-h-[200px] bg-muted/30">
          {exportResult ? (
            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <FileText className="h-4 w-4 text-muted-foreground" />
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => {
                    navigator.clipboard.writeText(exportResult);
                    toast.success('Copied to clipboard!');
                  }}
                >
                  Copy
                </Button>
              </div>
              <div className="space-y-2">
                <div className="flex items-stretch gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex-1 gap-2"
                    onClick={handleListenTts}
                    disabled={!isLoggedIn || !exportResult?.trim() || loadingTts}
                    title="Text-to-Speech"
                  >
                    <Volume2 className="h-4 w-4" />
                    {loadingTts ? 'Generating…' : 'Listen (TTS)'}
                  </Button>
                </div>
                <div className="flex items-stretch gap-2">
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex-1 gap-2"
                    onClick={() => handleGeneratePodcast('summary')}
                    disabled={!isLoggedIn || loadingPodcast}
                    title="Podcast from summary"
                  >
                    <Podcast className="h-4 w-4" />
                    {loadingPodcast ? '…' : 'Podcast (summary)'}
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    className="flex-1 gap-2"
                    onClick={() => handleGeneratePodcast('conversation')}
                    disabled={!isLoggedIn || loadingPodcast}
                    title="Podcast from conversation"
                  >
                    <Podcast className="h-4 w-4" />
                    {loadingPodcast ? '…' : 'Podcast (chat)'}
                  </Button>
                </div>
                {audioUrl && (
                  <audio ref={audioRef} src={audioUrl} controls className="w-full" />
                )}
              </div>
              <div className="text-sm whitespace-pre-wrap text-foreground">{exportResult}</div>
            </div>
          ) : (
            <div className="flex items-center justify-center h-full text-sm text-muted-foreground text-left">
              Results (export / summary / quiz) will appear here after actions run
            </div>
          )}
        </Card>
      </div>

      <Separator />

      {/* Feedback */}
      <div className="space-y-3">
        <h3>Feedback</h3>
        <Button
          variant="outline"
          className="w-full justify-start gap-2"
          onClick={() => setFeedbackDialogOpen(true)}
        >
          <MessageSquare className="h-4 w-4" />
          Provide Feedback
        </Button>
      </div>

      <Dialog open={feedbackDialogOpen} onOpenChange={setFeedbackDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>Provide Feedback</DialogTitle>
            <DialogDescription>Help us improve Clare by sharing your thoughts and suggestions.</DialogDescription>
          </DialogHeader>

          <div className="space-y-3">
            <div className="space-y-2">
              <Label htmlFor="feedbackCategory">Category</Label>
              <Select value={feedbackCategory} onValueChange={(v) => setFeedbackCategory(v as any)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select a category" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="general">General Feedback</SelectItem>
                  <SelectItem value="bug">Bug Report</SelectItem>
                  <SelectItem value="feature">Feature Request</SelectItem>
                </SelectContent>
              </Select>
            </div>

            <div className="space-y-2">
              <Label htmlFor="feedbackText">Feedback</Label>
              <Textarea
                id="feedbackText"
                value={feedbackText}
                onChange={(e) => setFeedbackText(e.target.value)}
                placeholder="Enter your feedback here..."
                className="min-h-[100px]"
              />
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setFeedbackDialogOpen(false)}>
              Cancel
            </Button>
            <Button onClick={handleFeedbackSubmit}>Submit</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}