"use client";

import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Inbox, Mail, Clock, AlertCircle, RefreshCw } from "lucide-react";

export default function MailReceivePage() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="w-full max-w-none px-4 py-8 space-y-8">
        {/* 페이지 제목 */}
        <div className="flex items-center justify-between bg-white rounded-lg shadow-sm border p-6">
          <div>
            <h1 className="text-3xl font-bold text-gray-900">메일 수신함</h1>
            <p className="mt-2 text-gray-600">받은 메일을 확인하고 관리합니다</p>
          </div>
          <Button variant="outline" size="sm" disabled>
            <RefreshCw className="w-4 h-4 mr-2" />
            새로고침
          </Button>
        </div>

        {/* 메일 목록 미리보기 */}
        <Card className="shadow-sm">
          <CardHeader className="bg-gradient-to-r from-slate-50 to-gray-50 border-b">
            <CardTitle className="flex items-center gap-2">
              <Inbox className="w-5 h-5 text-orange-500" />
              받은 메일함
            </CardTitle>
          </CardHeader>
          <CardContent className="p-6">
            {/* 빈 상태 */}
            <div className="text-center py-16">
              <Mail className="w-16 h-16 mx-auto mb-4 text-gray-300" />
              <h3 className="text-lg font-semibold text-gray-700 mb-2">
                메일 수신 기능 준비 중
              </h3>
              <p className="text-gray-500 mb-6">
                IMAP/POP3 기반 메일 수신 기능이 곧 추가될 예정입니다.
              </p>
              
              {/* 예상 레이아웃 미리보기 */}
              <div className="max-w-3xl mx-auto space-y-2">
                {[1, 2, 3].map((i) => (
                  <div
                    key={i}
                    className="flex items-center gap-4 p-4 bg-gray-50 rounded-lg border border-gray-200 opacity-40"
                  >
                    <div className="w-10 h-10 bg-gray-200 rounded-full" />
                    <div className="flex-1 text-left">
                      <div className="h-4 bg-gray-200 rounded w-1/3 mb-2" />
                      <div className="h-3 bg-gray-200 rounded w-2/3" />
                    </div>
                    <div className="text-xs text-gray-400">
                      <Clock className="w-4 h-4" />
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 안내 정보 */}
        <Card className="bg-gradient-to-r from-blue-50 to-indigo-50 border-blue-200 shadow-sm">
          <CardHeader>
            <CardTitle className="text-lg flex items-center">
              <AlertCircle className="w-5 h-5 mr-2 text-blue-500" />
              구현 예정 기능
            </CardTitle>
          </CardHeader>
          <CardContent>
            <p className="text-gray-700 mb-4">
              💡 메일 수신함에 추가될 기능들:
            </p>
            <ul className="space-y-2 text-sm text-gray-600">
              <li className="flex items-start">
                <span className="text-blue-500 mr-2">✓</span>
                <span>IMAP/POP3 프로토콜을 통한 메일 수신</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-500 mr-2">✓</span>
                <span>받은 메일 목록 조회 및 검색</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-500 mr-2">✓</span>
                <span>메일 읽음/읽지않음 상태 관리</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-500 mr-2">✓</span>
                <span>첨부파일 다운로드</span>
              </li>
              <li className="flex items-start">
                <span className="text-blue-500 mr-2">✓</span>
                <span>메일 필터링 및 정렬</span>
              </li>
            </ul>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}