'use client';

import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { 
  Search, 
  Filter, 
  Plus, 
  Edit, 
  Trash2, 
  Eye,
  Download,
  Upload,
  MoreHorizontal,
  ChefHat,
  Utensils,
  Clock,
  Users
} from 'lucide-react';

// Mock data untuk manajemen soal Dapur MBG
const mockQuestions = [
  {
    id: 1,
    title: 'Teknik Mise en Place dalam Persiapan Masakan',
    category: 'Dasar Kuliner',
    type: 'multiple_choice',
    difficulty: 'Mudah',
    points: 10,
    timeLimit: 120,
    status: 'active',
    createdBy: 'Chef Ahmad Fauzi',
    createdAt: '2024-01-15',
    usageCount: 45,
    correctRate: 85
  },
  {
    id: 2,
    title: 'Identifikasi Tingkat Kematangan Daging',
    category: 'Teknik Memasak',
    type: 'practical',
    difficulty: 'Sedang',
    points: 15,
    timeLimit: 180,
    status: 'active',
    createdBy: 'Chef Rina Sari',
    createdAt: '2024-01-14',
    usageCount: 32,
    correctRate: 78
  },
  {
    id: 3,
    title: 'Prosedur HACCP dalam Food Safety',
    category: 'Food Safety',
    type: 'essay',
    difficulty: 'Sulit',
    points: 20,
    timeLimit: 300,
    status: 'draft',
    createdBy: 'Chef Maria Gonzalez',
    createdAt: '2024-01-13',
    usageCount: 0,
    correctRate: 0
  },
  {
    id: 4,
    title: 'Teknik Pembuatan Mother Sauce Prancis',
    category: 'Kuliner Internasional',
    type: 'multiple_choice',
    difficulty: 'Sedang',
    points: 15,
    timeLimit: 150,
    status: 'active',
    createdBy: 'Chef Pierre Dubois',
    createdAt: '2024-01-12',
    usageCount: 28,
    correctRate: 82
  },
  {
    id: 5,
    title: 'Perhitungan Food Cost dan Menu Pricing',
    category: 'Menu Planning',
    type: 'calculation',
    difficulty: 'Sulit',
    points: 25,
    timeLimit: 240,
    status: 'active',
    createdBy: 'Chef Ahmad Fauzi',
    createdAt: '2024-01-11',
    usageCount: 19,
    correctRate: 65
  },
  {
    id: 6,
    title: 'Teknik Decorating Cake dan Pastry',
    category: 'Pastry & Bakery',
    type: 'practical',
    difficulty: 'Sedang',
    points: 18,
    timeLimit: 200,
    status: 'inactive',
    createdBy: 'Chef Sari Dewi',
    createdAt: '2024-01-10',
    usageCount: 15,
    correctRate: 88
  }
];

const categories = [
  'Semua Kategori',
  'Dasar Kuliner',
  'Teknik Memasak',
  'Food Safety',
  'Kuliner Internasional',
  'Menu Planning',
  'Pastry & Bakery'
];

const questionTypes = [
  'Semua Tipe',
  'multiple_choice',
  'essay',
  'practical',
  'calculation'
];

const difficulties = [
  'Semua Tingkat',
  'Mudah',
  'Sedang',
  'Sulit'
];

const statuses = [
  'Semua Status',
  'active',
  'draft',
  'inactive'
];

export default function QuestionsManagePage() {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('Semua Kategori');
  const [selectedType, setSelectedType] = useState('Semua Tipe');
  const [selectedDifficulty, setSelectedDifficulty] = useState('Semua Tingkat');
  const [selectedStatus, setSelectedStatus] = useState('Semua Status');

  const filteredQuestions = mockQuestions.filter(question => {
    return (
      question.title.toLowerCase().includes(searchTerm.toLowerCase()) &&
      (selectedCategory === 'Semua Kategori' || question.category === selectedCategory) &&
      (selectedType === 'Semua Tipe' || question.type === selectedType) &&
      (selectedDifficulty === 'Semua Tingkat' || question.difficulty === selectedDifficulty) &&
      (selectedStatus === 'Semua Status' || question.status === selectedStatus)
    );
  });

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'active': return 'bg-green-100 text-green-800';
      case 'draft': return 'bg-yellow-100 text-yellow-800';
      case 'inactive': return 'bg-gray-100 text-gray-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'Mudah': return 'bg-green-100 text-green-800';
      case 'Sedang': return 'bg-yellow-100 text-yellow-800';
      case 'Sulit': return 'bg-red-100 text-red-800';
      default: return 'bg-gray-100 text-gray-800';
    }
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'multiple_choice': return <ChefHat className="w-4 h-4" />;
      case 'essay': return <Edit className="w-4 h-4" />;
      case 'practical': return <Utensils className="w-4 h-4" />;
      case 'calculation': return <Users className="w-4 h-4" />;
      default: return <ChefHat className="w-4 h-4" />;
    }
  };

  return (
    <div className="p-6 space-y-6">
      {/* Header */}
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold text-gray-900">Manajemen Soal</h1>
          <p className="text-gray-600 mt-1">
            Kelola bank soal pelatihan Dapur MBG
          </p>
        </div>
        <div className="flex gap-3">
          <Button variant="outline" className="flex items-center gap-2">
            <Download className="w-4 h-4" />
            Export
          </Button>
          <Button variant="outline" className="flex items-center gap-2">
            <Upload className="w-4 h-4" />
            Import
          </Button>
          <Button className="flex items-center gap-2">
            <Plus className="w-4 h-4" />
            Tambah Soal
          </Button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Total Soal</p>
                <p className="text-2xl font-bold text-gray-900">156</p>
              </div>
              <ChefHat className="w-8 h-8 text-blue-600" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Soal Aktif</p>
                <p className="text-2xl font-bold text-green-600">142</p>
              </div>
              <Eye className="w-8 h-8 text-green-600" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Draft</p>
                <p className="text-2xl font-bold text-yellow-600">8</p>
              </div>
              <Edit className="w-8 h-8 text-yellow-600" />
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Rata-rata Benar</p>
                <p className="text-2xl font-bold text-purple-600">78%</p>
              </div>
              <Users className="w-8 h-8 text-purple-600" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <Card>
        <CardContent className="p-6">
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
            <div className="relative">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
              <Input
                placeholder="Cari soal..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
            <select
              value={selectedCategory}
              onChange={(e) => setSelectedCategory(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {categories.map(category => (
                <option key={category} value={category}>{category}</option>
              ))}
            </select>
            <select
              value={selectedType}
              onChange={(e) => setSelectedType(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {questionTypes.map(type => (
                <option key={type} value={type}>{type}</option>
              ))}
            </select>
            <select
              value={selectedDifficulty}
              onChange={(e) => setSelectedDifficulty(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {difficulties.map(difficulty => (
                <option key={difficulty} value={difficulty}>{difficulty}</option>
              ))}
            </select>
            <select
              value={selectedStatus}
              onChange={(e) => setSelectedStatus(e.target.value)}
              className="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              {statuses.map(status => (
                <option key={status} value={status}>{status}</option>
              ))}
            </select>
          </div>
        </CardContent>
      </Card>

      {/* Questions Table */}
      <Card>
        <CardHeader>
          <CardTitle>Daftar Soal ({filteredQuestions.length})</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b">
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Soal</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Kategori</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Tipe</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Tingkat</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Poin</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Waktu</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Status</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Penggunaan</th>
                  <th className="text-left py-3 px-4 font-medium text-gray-900">Aksi</th>
                </tr>
              </thead>
              <tbody>
                {filteredQuestions.map((question) => (
                  <tr key={question.id} className="border-b hover:bg-gray-50">
                    <td className="py-3 px-4">
                      <div>
                        <p className="font-medium text-gray-900">{question.title}</p>
                        <p className="text-sm text-gray-500">
                          Dibuat oleh {question.createdBy} • {question.createdAt}
                        </p>
                      </div>
                    </td>
                    <td className="py-3 px-4">
                      <Badge variant="outline">{question.category}</Badge>
                    </td>
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-2">
                        {getTypeIcon(question.type)}
                        <span className="text-sm">{question.type}</span>
                      </div>
                    </td>
                    <td className="py-3 px-4">
                      <Badge className={getDifficultyColor(question.difficulty)}>
                        {question.difficulty}
                      </Badge>
                    </td>
                    <td className="py-3 px-4 text-center">{question.points}</td>
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-1">
                        <Clock className="w-4 h-4 text-gray-400" />
                        <span className="text-sm">{question.timeLimit}s</span>
                      </div>
                    </td>
                    <td className="py-3 px-4">
                      <Badge className={getStatusColor(question.status)}>
                        {question.status}
                      </Badge>
                    </td>
                    <td className="py-3 px-4">
                      <div className="text-sm">
                        <p>{question.usageCount}x digunakan</p>
                        <p className="text-gray-500">{question.correctRate}% benar</p>
                      </div>
                    </td>
                    <td className="py-3 px-4">
                      <div className="flex items-center gap-2">
                        <Button variant="ghost" size="sm">
                          <Eye className="w-4 h-4" />
                        </Button>
                        <Button variant="ghost" size="sm">
                          <Edit className="w-4 h-4" />
                        </Button>
                        <Button variant="ghost" size="sm">
                          <Trash2 className="w-4 h-4" />
                        </Button>
                        <Button variant="ghost" size="sm">
                          <MoreHorizontal className="w-4 h-4" />
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}