import React, { useState, useEffect } from 'react';
import { Calendar, Users, FileText, AlertCircle, CheckCircle, Clock, TrendingUp, Settings, Plus, Edit2, Trash2, Save, X, ChevronRight, Download, Upload } from 'lucide-react';

// 學生會工作管理系統
export default function StudentUnionSystem() {
  const [currentPage, setCurrentPage] = useState('dashboard');
  const [data, setData] = useState({
    meetings: [],
    events: [],
    attendance: [],
    proposals: [],
    calendar: [],
    workRecords: [],
    announcements: [],
    tripRecords: []
  });

  // 載入數據
  useEffect(() => {
    loadData();
  }, []);

  const loadData = async () => {
    try {
      const result = await window.storage.get('student-union-data');
      if (result) {
        setData(JSON.parse(result.value));
      }
    } catch (error) {
      console.log('初次使用，創建新數據');
    }
  };

  const saveData = async (newData) => {
    setData(newData);
    try {
      await window.storage.set('student-union-data', JSON.stringify(newData));
    } catch (error) {
      console.error('保存數據失敗:', error);
    }
  };

  const renderPage = () => {
    switch (currentPage) {
      case 'dashboard':
        return <Dashboard data={data} setCurrentPage={setCurrentPage} />;
      case 'meeting-attendance':
        return <MeetingAttendance data={data} saveData={saveData} />;
      case 'event-booth':
        return <EventBooth data={data} saveData={saveData} />;
      case 'event-attendance':
        return <EventAttendance data={data} saveData={saveData} />;
      case 'event-management':
        return <EventManagement data={data} saveData={saveData} />;
      case 'admin-process':
        return <AdminProcess data={data} saveData={saveData} />;
      case 'calendar':
        return <CalendarView data={data} saveData={saveData} />;
      case 'trip-record':
        return <TripRecord data={data} saveData={saveData} />;
      case 'work-record':
        return <WorkRecord data={data} saveData={saveData} />;
      case 'announcements':
        return <Announcements data={data} saveData={saveData} />;
      default:
        return <Dashboard data={data} setCurrentPage={setCurrentPage} />;
    }
  };

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
      {/* 頂部導航 */}
      <nav className="bg-white shadow-lg border-b-4 border-indigo-500">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <div className="flex items-center space-x-4">
              <div className="w-12 h-12 bg-gradient-to-br from-indigo-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg transform rotate-12">
                <Users className="w-7 h-7 text-white -rotate-12" />
              </div>
              <div>
                <h1 className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
                  學生會工作管理系統
                </h1>
                <p className="text-sm text-gray-500">Student Union Management System</p>
              </div>
            </div>
            <button 
              onClick={() => setCurrentPage('dashboard')}
              className="px-6 py-2 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 transition-all font-medium"
            >
              返回主頁
            </button>
          </div>
        </div>
      </nav>

      {/* 主要內容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {renderPage()}
      </div>

      {/* 版權資訊 */}
      <footer className="text-center py-8 text-gray-500 text-sm">
        <p>© 2026 學生會工作管理系統 - 提升效率，記錄每一刻</p>
      </footer>
    </div>
  );
}

// 儀表板
function Dashboard({ data, setCurrentPage }) {
  const menuItems = [
    {
      id: 'meeting-attendance',
      title: '開會點名紀錄',
      description: '記錄會議出席狀況',
      icon: Users,
      color: 'from-blue-500 to-cyan-500',
      count: data.meetings.length
    },
    {
      id: 'event-booth',
      title: '活動顧攤紀錄',
      description: '記錄顧攤人員報到',
      icon: CheckCircle,
      color: 'from-green-500 to-emerald-500',
      count: data.attendance.filter(a => a.type === 'booth').length
    },
    {
      id: 'event-attendance',
      title: '活動出席紀錄',
      description: '記錄活動參與人員',
      icon: Users,
      color: 'from-purple-500 to-pink-500',
      count: data.attendance.filter(a => a.type === 'event').length
    },
    {
      id: 'event-management',
      title: '活動紀錄表',
      description: '從企劃到檢討完整流程',
      icon: FileText,
      color: 'from-orange-500 to-red-500',
      count: data.events.length
    },
    {
      id: 'admin-process',
      title: '會內行政流程',
      description: '提案審核流程管理',
      icon: TrendingUp,
      color: 'from-indigo-500 to-purple-500',
      count: data.proposals.length
    },
    {
      id: 'calendar',
      title: '會內行事曆',
      description: '統整所有行程',
      icon: Calendar,
      color: 'from-teal-500 to-green-500',
      count: data.calendar.length
    },
    {
      id: 'trip-record',
      title: '出差紀錄表',
      description: '記錄外出公務',
      icon: FileText,
      color: 'from-yellow-500 to-orange-500',
      count: data.tripRecords.length
    },
    {
      id: 'work-record',
      title: '工作紀錄表',
      description: '各部會工作記錄',
      icon: Clock,
      color: 'from-pink-500 to-rose-500',
      count: data.workRecords.length
    },
    {
      id: 'announcements',
      title: '公告紀錄表',
      description: '經費、規章、聲明',
      icon: AlertCircle,
      color: 'from-red-500 to-pink-500',
      count: data.announcements.length
    }
  ];

  return (
    <div className="space-y-8">
      <div className="text-center space-y-4">
        <h2 className="text-4xl font-bold text-gray-800">歡迎使用學生會管理系統</h2>
        <p className="text-xl text-gray-600">選擇功能開始管理您的學生會工作</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {menuItems.map((item) => {
          const Icon = item.icon;
          return (
            <button
              key={item.id}
              onClick={() => setCurrentPage(item.id)}
              className="group relative bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-2"
            >
              <div className={`absolute inset-0 bg-gradient-to-br ${item.color} opacity-0 group-hover:opacity-10 transition-opacity`} />
              
              <div className="p-6 space-y-4">
                <div className="flex items-start justify-between">
                  <div className={`w-14 h-14 bg-gradient-to-br ${item.color} rounded-xl flex items-center justify-center shadow-lg`}>
                    <Icon className="w-7 h-7 text-white" />
                  </div>
                  <span className="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm font-semibold">
                    {item.count} 筆
                  </span>
                </div>

                <div className="space-y-2">
                  <h3 className="text-xl font-bold text-gray-800 group-hover:text-indigo-600 transition-colors">
                    {item.title}
                  </h3>
                  <p className="text-gray-600 text-sm">
                    {item.description}
                  </p>
                </div>

                <div className="flex items-center text-indigo-600 font-medium group-hover:translate-x-2 transition-transform">
                  <span>進入管理</span>
                  <ChevronRight className="w-5 h-5 ml-1" />
                </div>
              </div>
            </button>
          );
        })}
      </div>

      {/* 快速統計 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mt-8">
        <StatCard title="總會議數" value={data.meetings.length} icon={Users} color="blue" />
        <StatCard title="進行中活動" value={data.events.filter(e => e.status === 'ongoing').length} icon={TrendingUp} color="green" />
        <StatCard title="待審提案" value={data.proposals.filter(p => p.status === 'pending').length} icon={FileText} color="yellow" />
        <StatCard title="本月行程" value={data.calendar.filter(c => new Date(c.date).getMonth() === new Date().getMonth()).length} icon={Calendar} color="purple" />
      </div>
    </div>
  );
}

function StatCard({ title, value, icon: Icon, color }) {
  const colors = {
    blue: 'from-blue-500 to-cyan-500',
    green: 'from-green-500 to-emerald-500',
    yellow: 'from-yellow-500 to-orange-500',
    purple: 'from-purple-500 to-pink-500'
  };

  return (
    <div className="bg-white rounded-xl shadow-lg p-6 border-l-4 border-indigo-500">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-gray-600 text-sm font-medium">{title}</p>
          <p className="text-3xl font-bold text-gray-800 mt-2">{value}</p>
        </div>
        <div className={`w-12 h-12 bg-gradient-to-br ${colors[color]} rounded-lg flex items-center justify-center`}>
          <Icon className="w-6 h-6 text-white" />
        </div>
      </div>
    </div>
  );
}

// 1. 開會點名紀錄
function MeetingAttendance({ data, saveData }) {
  const [meetings, setMeetings] = useState(data.meetings);
  const [showForm, setShowForm] = useState(false);
  const [editingId, setEditingId] = useState(null);
  const [formData, setFormData] = useState({
    date: '',
    title: '',
    type: '例行會議',
    attendees: [],
    absentees: [],
    notes: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const newMeetings = editingId
      ? meetings.map(m => m.id === editingId ? { ...formData, id: editingId } : m)
      : [...meetings, { ...formData, id: Date.now() }];
    
    setMeetings(newMeetings);
    saveData({ ...data, meetings: newMeetings });
    resetForm();
  };

  const resetForm = () => {
    setFormData({
      date: '',
      title: '',
      type: '例行會議',
      attendees: [],
      absentees: [],
      notes: ''
    });
    setShowForm(false);
    setEditingId(null);
  };

  const handleDelete = (id) => {
    const newMeetings = meetings.filter(m => m.id !== id);
    setMeetings(newMeetings);
    saveData({ ...data, meetings: newMeetings });
  };

  const handleEdit = (meeting) => {
    setFormData(meeting);
    setEditingId(meeting.id);
    setShowForm(true);
  };

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <h2 className="text-3xl font-bold text-gray-800">開會點名紀錄</h2>
        <button
          onClick={() => setShowForm(!showForm)}
          className="flex items-center space-x-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-lg hover:shadow-lg transition-all"
        >
          {showForm ? <X className="w-5 h-5" /> : <Plus className="w-5 h-5" />}
          <span>{showForm ? '取消' : '新增會議'}</span>
        </button>
      </div>

      {showForm && (
        <div className="bg-white rounded-xl shadow-lg p-8 border-t-4 border-indigo-500">
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">會議日期</label>
                <input
                  type="date"
                  value={formData.date}
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                  required
                />
              </div>
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">會議類型</label>
                <select
                  value={formData.type}
                  onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                  className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                >
                  <option>例行會議</option>
                  <option>臨時會議</option>
                  <option>部門會議</option>
                  <option>幹部會議</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">會議主題</label>
              <input
                type="text"
                value={formData.title}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                placeholder="例：第三次例行會議"
                required
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">出席名單（一行一個姓名）</label>
              <textarea
                value={formData.attendees.join('\n')}
                onChange={(e) => setFormData({ ...formData, attendees: e.target.value.split('\n').filter(n => n.trim()) })}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                rows="4"
                placeholder="張三&#10;李四&#10;王五"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">缺席名單（一行一個姓名）</label>
              <textarea
                value={formData.absentees.join('\n')}
                onChange={(e) => setFormData({ ...formData, absentees: e.target.value.split('\n').filter(n => n.trim()) })}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                rows="3"
                placeholder="趙六（請假）"
              />
            </div>

            <div>
              <label className="block text-sm font-semibold text-gray-700 mb-2">備註</label>
              <textarea
                value={formData.notes}
                onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
                className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 transition-all"
                rows="3"
                placeholder="其他需要記錄的事項"
              />
            </div>

            <div className="flex space-x-4">
              <button
                type="submit"
                className="flex-1 flex items-center justify-center space-x-2 px-6 py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:shadow-lg transition-all"
              >
                <Save className="w-5 h-5" />
                <span>儲存</span>
              </button>
              <button
                type="button"
                onClick={resetForm}
                className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-all"
              >
                取消
              </button>
            </div>
          </form>
        </div>
      )}

      <div className="grid gap-4">
        {meetings.length === 0 ? (
          <div className="text-center py-12 bg-white rounded-xl shadow">
            <Users className="w-16 h-16 text-gray-300 mx-auto mb-4" />
            <p className="text-gray-500">尚無會議紀錄，點擊上方按鈕新增</p>
          </div>
        ) : (
          meetings.map((meeting) => (
            <div key={meeting.id} className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-all border-l-4 border-indigo-500">
              <div className="flex justify-between items-start mb-4">
                <div>
                  <div className="flex items-center space-x-3 mb-2">
                    <h3 className="text-xl font-bold text-gray-800">{meeting.title}</h3>
                    <span className="px-3 py-1 bg-indigo-100 text-indigo-700 rounded-full text-sm font-semibold">
                      {meeting.type}
                    </span>
                  </div>
                  <p className="text-gray-600">{meeting.date}</p>
                </div>
                <div className="flex space-x-2">
                  <button
                    onClick={() => handleEdit(meeting)}
                    className="p-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 transition-all"
                  >
                    <Edit2 className="w-5 h-5" />
                  </button>
                  <button
                    onClick={() => handleDelete(meeting.id)}
                    className="p-2 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 transition-all"
                  >
                    <Trash2 className="w-5 h-5" />
                  </button>
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                <div className="bg-green-50 rounded-lg p-4">
                  <h4 className="font-semibold text-green-800 mb-2">出席人員 ({meeting.attendees.length}人)</h4>
                  <div className="space-y-1">
                    {meeting.attendees.map((name, idx) => (
                      <div key={idx} className="flex items-center space-x-2">
                        <CheckCircle className="w-4 h-4 text-green-600" />
                        <span className="text-gray-700">{name}</span>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="bg-red-50 rounded-lg p-4">
                  <h4 className="font-semibold text-red-800 mb-2">缺席人員 ({meeting.absentees.length}人)</h4>
                  <div className="space-y-1">
                    {meeting.absentees.map((name, idx) => (
                      <div key={idx} className="flex items-center space-x-2">
                        <X className="w-4 h-4 text-red-600" />
                        <span className="text-gray-700">{name}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {meeting.notes && (
                <div className="mt-4 p-4 bg-gray-50 rounded-lg">
                  <h4 className="font-semibold text-gray-800 mb-2">備註</h4>
                  <p className="text-gray-700 whitespace-pre-wrap">{meeting.notes}</p>
                </div>
              )}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

// 2&3. 活動顧攤 & 出席紀錄（合併）
function EventBooth({ data, saveData }) {
  return <AttendanceRecord data={data} saveData={saveData} type="booth" title="活動顧攤紀錄" />;
}

function EventAttendance({ data, saveData }) {
  return <AttendanceRecord data={data} saveData={saveData} type="event" title="活動出席紀錄" />;
}

function AttendanceRecord({ data, saveData, type, title }) {
  const [records, setRecords] = useState(data.attendance.filter(a => a.type === type));
  const [showForm, setShowForm] = useState(false);
  const [formData, setFormData] = useState({
    eventName: '',
    date: '',
    checkInTime: '',
    checkOutTime: '',
    attendees: []
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    const newRecord = { ...formData, id: Date.now(), type };
    const allAttendance = [...data.attendance, newRecord];
    setRecords([...records, newRecord]);
    saveData({ ...data, attendance: allAttendance });
    resetForm();
  };

  const resetForm = () => {
    setFormData({
      eventName: '',
      date: '',
      checkInTime: '',
      checkOutTime: '',
      attendees: []
    });
    setShowForm(false);
  };

  const handleDelete = (id) => {
    const newRecords = records.filter(r => r.id !== id);
    const allAttendance = data.attendance.filter(a => a.id !== id);
    setRecords(newRecords);
    saveData({ ...data, attendance: allAttendance });
  };

  return