'use client';

import DashboardLayout from '@/layouts/DashboardLayout';
import { AcademicCapIcon, PaperAirplaneIcon, ChatBubbleLeftRightIcon, LightBulbIcon, BookOpenIcon } from '@heroicons/react/24/outline';
import { cn } from '@/utils/cn';
import { useState } from 'react';

const conversationHistory = [
  {
    id: 1,
    type: 'user',
    message: 'Bisakah Anda menjelaskan tentang prinsip HACCP?',
    timestamp: '10:30'
  },
  {
    id: 2,
    type: 'assistant',
    message: 'HACCP (Hazard Analysis Critical Control Point) adalah sistem manajemen keamanan pangan yang berfokus pada identifikasi, evaluasi, dan pengendalian bahaya yang signifikan terhadap keamanan pangan. Sistem ini memiliki 7 prinsip utama:\n\n1. Analisis Bahaya\n2. Identifikasi Titik Kendali Kritis (CCP)\n3. Penetapan Batas Kritis\n4. Sistem Monitoring\n5. Tindakan Koreksi\n6. Verifikasi\n7. Dokumentasi dan Pencatatan\n\nApakah ada prinsip tertentu yang ingin Anda pelajari lebih dalam?',
    timestamp: '10:31'
  },
  {
    id: 3,
    type: 'user',
    message: 'Bagaimana cara mengidentifikasi CCP?',
    timestamp: '10:35'
  },
  {
    id: 4,
    type: 'assistant',
    message: 'Untuk mengidentifikasi Critical Control Point (CCP), Anda dapat menggunakan Decision Tree atau Pohon Keputusan CCP. Berikut langkah-langkahnya:\n\n**Pertanyaan 1:** Apakah ada tindakan pencegahan untuk bahaya yang teridentifikasi?\n- Jika tidak, modifikasi tahap atau proses\n- Jika ya, lanjut ke pertanyaan 2\n\n**Pertanyaan 2:** Apakah tahap ini dirancang khusus untuk menghilangkan atau mengurangi kemungkinan terjadinya bahaya ke tingkat yang dapat diterima?\n- Jika ya, maka ini adalah CCP\n- Jika tidak, lanjut ke pertanyaan 3\n\n**Pertanyaan 3:** Bisakah kontaminasi terjadi atau meningkat ke tingkat yang tidak dapat diterima?\n- Jika tidak, bukan CCP\n- Jika ya, lanjut ke pertanyaan 4\n\n**Pertanyaan 4:** Akankah tahap selanjutnya menghilangkan bahaya atau mengurangi kemungkinan terjadinya ke tingkat yang dapat diterima?\n- Jika ya, bukan CCP\n- Jika tidak, maka ini adalah CCP',
    timestamp: '10:36'
  }
];

const quickActions = [
  {
    id: 1,
    title: 'Tanya tentang HACCP',
    description: 'Pelajari sistem keamanan pangan',
    icon: BookOpenIcon,
    color: 'bg-blue-100 text-blue-600'
  },
  {
    id: 2,
    title: 'Bantuan Tugas',
    description: 'Dapatkan bantuan mengerjakan tugas',
    icon: AcademicCapIcon,
    color: 'bg-green-100 text-green-600'
  },
  {
    id: 3,
    title: 'Persiapan Ujian',
    description: 'Tips dan strategi ujian',
    icon: LightBulbIcon,
    color: 'bg-yellow-100 text-yellow-600'
  },
  {
    id: 4,
    title: 'Diskusi Materi',
    description: 'Diskusi mendalam tentang materi',
    icon: ChatBubbleLeftRightIcon,
    color: 'bg-purple-100 text-purple-600'
  }
];

const suggestions = [
  'Jelaskan perbedaan antara HACCP dan ISO 22000',
  'Bagaimana cara melakukan analisis bahaya dalam HACCP?',
  'Apa saja dokumen yang diperlukan untuk sertifikasi halal?',
  'Berikan contoh implementasi sanitasi di industri pangan'
];

export default function AIAssistantPage() {
  const [message, setMessage] = useState('');
  const [isTyping, setIsTyping] = useState(false);

  const handleSendMessage = () => {
    if (message.trim()) {
      // Simulate sending message
      setIsTyping(true);
      setTimeout(() => {
        setIsTyping(false);
      }, 2000);
      setMessage('');
    }
  };

  const handleKeyPress = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  return (
    <DashboardLayout>
      <div className="p-6 h-full flex flex-col">
        {/* Header */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">AI Assistant</h1>
          <p className="text-gray-600">Dapatkan bantuan pembelajaran dengan AI Assistant yang cerdas</p>
        </div>

        <div className="flex-1 grid grid-cols-1 lg:grid-cols-4 gap-6">
          {/* Chat Area */}
          <div className="lg:col-span-3 flex flex-col">
            {/* Chat Messages */}
            <div className="flex-1 bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col">
              <div className="p-4 border-b border-gray-100">
                <div className="flex items-center">
                  <div className="p-2 bg-blue-100 rounded-lg mr-3">
                    <AcademicCapIcon className="h-6 w-6 text-blue-600" />
                  </div>
                  <div>
                    <h3 className="font-semibold text-gray-900">AI Learning Assistant</h3>
                    <p className="text-sm text-green-600">● Online</p>
                  </div>
                </div>
              </div>

              {/* Messages */}
              <div className="flex-1 p-4 overflow-y-auto space-y-4">
                {conversationHistory.map((msg) => (
                  <div key={msg.id} className={cn(
                    "flex",
                    msg.type === 'user' ? 'justify-end' : 'justify-start'
                  )}>
                    <div className={cn(
                      "max-w-xs lg:max-w-md px-4 py-2 rounded-lg",
                      msg.type === 'user'
                        ? 'bg-blue-600 text-white'
                        : 'bg-gray-100 text-gray-900'
                    )}>
                      <p className="text-sm whitespace-pre-line">{msg.message}</p>
                      <p className={cn(
                        "text-xs mt-1",
                        msg.type === 'user' ? 'text-blue-100' : 'text-gray-500'
                      )}>
                        {msg.timestamp}
                      </p>
                    </div>
                  </div>
                ))}

                {/* Typing Indicator */}
                {isTyping && (
                  <div className="flex justify-start">
                    <div className="bg-gray-100 text-gray-900 px-4 py-2 rounded-lg">
                      <div className="flex space-x-1">
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
                        <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
                      </div>
                    </div>
                  </div>
                )}
              </div>

              {/* Message Input */}
              <div className="p-4 border-t border-gray-100">
                <div className="flex space-x-3">
                  <textarea
                    value={message}
                    onChange={(e) => setMessage(e.target.value)}
                    onKeyPress={handleKeyPress}
                    placeholder="Ketik pertanyaan Anda di sini..."
                    className="flex-1 resize-none border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                    rows={2}
                  />
                  <button
                    onClick={handleSendMessage}
                    disabled={!message.trim()}
                    className={cn(
                      "px-4 py-2 rounded-lg transition-colors",
                      message.trim()
                        ? "bg-blue-600 text-white hover:bg-blue-700"
                        : "bg-gray-100 text-gray-400 cursor-not-allowed"
                    )}
                  >
                    <PaperAirplaneIcon className="h-5 w-5" />
                  </button>
                </div>
              </div>
            </div>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Quick Actions */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
              <h3 className="font-semibold text-gray-900 mb-4">Aksi Cepat</h3>
              <div className="space-y-3">
                {quickActions.map((action) => {
                  const IconComponent = action.icon;
                  return (
                    <button key={action.id} className="w-full text-left p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors">
                      <div className="flex items-start">
                        <div className={cn("p-2 rounded-lg mr-3", action.color)}>
                          <IconComponent className="h-4 w-4" />
                        </div>
                        <div>
                          <p className="font-medium text-gray-900 text-sm">{action.title}</p>
                          <p className="text-xs text-gray-600">{action.description}</p>
                        </div>
                      </div>
                    </button>
                  );
                })}
              </div>
            </div>

            {/* Suggested Questions */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
              <h3 className="font-semibold text-gray-900 mb-4">Pertanyaan Populer</h3>
              <div className="space-y-2">
                {suggestions.map((suggestion, index) => (
                  <button
                    key={index}
                    onClick={() => setMessage(suggestion)}
                    className="w-full text-left p-2 text-sm text-gray-600 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
                  >
                    {suggestion}
                  </button>
                ))}
              </div>
            </div>

            {/* Usage Stats */}
            <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
              <h3 className="font-semibold text-gray-900 mb-4">Statistik Penggunaan</h3>
              <div className="space-y-3">
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">Pertanyaan Hari Ini</span>
                  <span className="font-medium text-gray-900">12</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">Total Percakapan</span>
                  <span className="font-medium text-gray-900">45</span>
                </div>
                <div className="flex justify-between items-center">
                  <span className="text-sm text-gray-600">Waktu Respons Rata-rata</span>
                  <span className="font-medium text-gray-900">2.3s</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}