import React from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Button } from "@/components/ui/button";

export default function StudentPortal() {
  return (
    <div className="p-6 max-w-5xl mx-auto">
      <h1 className="text-3xl font-bold mb-6">🎓 학생 포털</h1>

      <Tabs defaultValue="shuttle" className="w-full">
        <TabsList className="mb-4">
          <TabsTrigger value="shuttle">🚌 셔틀버스</TabsTrigger>
          <TabsTrigger value="schedule">📅 시간표 및 학사일정</TabsTrigger>
          <TabsTrigger value="events">🎉 학교 행사</TabsTrigger>
        </TabsList>

        {/* 셔틀버스 정보 탭 */}
        <TabsContent value="shuttle">
          <Card>
            <CardContent className="p-4">
              <h2 className="text-xl font-semibold mb-2">셔틀버스 시간표</h2>
              <ul className="list-disc list-inside space-y-1">
                <li>08:00 - 정문 출발</li>
                <li>09:30 - 후문 출발</li>
                <li>12:00 - 기숙사 출발</li>
                <li>17:00 - 캠퍼스 순환</li>
              </ul>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 수업 시간표 및 학사일정 탭 */}
        <TabsContent value="schedule">
          <Card>
            <CardContent className="p-4 space-y-6">
              {/* 수업 시간표 (표 형태) */}
              <div>
                <h2 className="text-xl font-semibold mb-4">수업 시간표</h2>
                <table className="w-full table-auto border border-gray-300 text-sm">
                  <thead className="bg-gray-100">
                    <tr>
                      <th className="border px-4 py-2">요일</th>
                      <th className="border px-4 py-2">과목</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td className="border px-4 py-2">월요일</td>
                      <td className="border px-4 py-2">컴퓨터공학 / 수학</td>
                    </tr>
                    <tr>
                      <td className="border px-4 py-2">화요일</td>
                      <td className="border px-4 py-2">영어 / 프로그래밍</td>
                    </tr>
                    <tr>
                      <td className="border px-4 py-2">수요일</td>
                      <td className="border px-4 py-2">데이터베이스 / 자율학습</td>
                    </tr>
                    <tr>
                      <td className="border px-4 py-2">목요일</td>
                      <td className="border px-4 py-2">소프트웨어 공학 / 체육</td>
                    </tr>
                    <tr>
                      <td className="border px-4 py-2">금요일</td>
                      <td className="border px-4 py-2">프로젝트 실습</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              {/* 학사일정 (달력 디자인) */}
              <div>
                <h2 className="text-xl font-semibold mb-4">학사일정</h2>
                <div className="grid grid-cols-7 gap-2 text-center text-xs">
                  <div className="font-bold">일</div>
                  <div className="font-bold">월</div>
                  <div className="font-bold">화</div>
                  <div className="font-bold">수</div>
                  <div className="font-bold">목</div>
                  <div className="font-bold">금</div>
                  <div className="font-bold">토</div>

                  {Array.from({ length: 30 }, (_, i) => {
                    const day = i + 1;
                    const isHoliday =
                      day === 5 || // 어린이날
                      day === 6 || // 현충일
                      (day >= 15 && day <= 19) || // 중간고사
                      (day >= 10 && day <= 14); // 기말고사
                    return (
                      <div
                        key={day}
                        className={`p-2 rounded border text-center ${
                          (day >= 15 && day <= 19) ? "bg-yellow-200" :
                          (day >= 10 && day <= 14) ? "bg-red-200" :
                          (day === 5 || day === 6) ? "bg-blue-200" : ""
                        }`}
                      >
                        {day}
                      </div>
                    );
                  })}
                </div>
                <div className="mt-2 text-xs space-y-1">
                  <div><span className="inline-block w-3 h-3 bg-yellow-200 mr-2"></span>중간고사</div>
                  <div><span className="inline-block w-3 h-3 bg-red-200 mr-2"></span>기말고사</div>
                  <div><span className="inline-block w-3 h-3 bg-blue-200 mr-2"></span>공휴일</div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        {/* 학교 행사 및 참가 신청 탭 */}
        <TabsContent value="events">
          <Card>
            <CardContent className="p-4 space-y-4">
              <div>
                <h2 className="text-xl font-semibold mb-2">다가오는 행사</h2>
                <ul className="list-disc list-inside">
                  <li>5월 10일 - 봄 축제</li>
                  <li>6월 1일 - 동아리 전시회</li>
                  <li>6월 20일 - 종강파티</li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold mb-2">참가 신청</h2>
                <form className="space-y-2">
                  <input
                    type="text"
                    placeholder="이름"
                    className="border rounded p-2 w-full"
                  />
                  <select className="border rounded p-2 w-full">
                    <option>참가할 행사 선택</option>
                    <option>봄 축제</option>
                    <option>동아리 전시회</option>
                    <option>종강파티</option>
                  </select>
                  <Button type="submit">신청하기</Button>
                </form>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}