import { useEffect, useState } from "react";
import { Input, Button, Card, Steps, Tag, Spin, message, Empty } from "antd";
import { SearchOutlined, SafetyCertificateOutlined, SendOutlined, MailOutlined, SyncOutlined, CheckCircleOutlined } from "@ant-design/icons";
import ProgressHeader from "./ProgressHeader";
import { api } from "@nice/client";
import { LetterBadge } from "@web/src/components/models/post/LetterBadge";
import dayjs from "dayjs";
import { LetterCard } from "@web/src/components/models/post/LetterCard";
import { postDetailSelect, PostState } from "@nice/common";



export default function LetterProgressPage() {
	const [letterId, setLetterId] = useState<string>();
	const { data, isLoading, error } = api.post.findFirst.useQuery({
		where: {
			id: letterId
		},
		select: postDetailSelect
	}, { enabled: Boolean(letterId) })

	useEffect(() => {
		if (error) {
			message.error('查询失败，请检查信件编码是否正确');
		}
	}, [error]);


	return (
		<div
			className=" shadow-elegant border-2 border-white rounded-xl  bg-slate-200">
			<ProgressHeader></ProgressHeader>
			<main className=" mx-auto p-6 flex flex-col gap-4">
				<div className="flex gap-4">
					<Input
						variant="filled"
						prefix={
							<SearchOutlined className=" text-secondary-300" />
						}
						size="large"
						value={letterId}
						onChange={(e) => setLetterId(e.target.value)}
						placeholder="请输入信件编码查询处理状态"

					/>
				</div>
				{isLoading && <div className="flex justify-center items-center pt-6">
					<Spin size="large" ></Spin>
				</div>}
				{!isLoading && letterId && !data && (
					<div className=" p-6">
						<Empty
							description={`未找到编码为 ${letterId} 的信件`}
						></Empty>
					</div>
				)}
				{data && (
					<>
						<LetterCard letter={data as any} />
						<div className=" p-6 bg-slate-100 border hover:ring-1  ring-white       ease-in-out hover:-translate-y-0.5 border-white rounded-xl cursor-pointer  overflow-hidden   transition-all duration-300">

							<Steps
								current={[PostState.PENDING, PostState.PROCESSING, PostState.RESOLVED].indexOf(data.state as PostState)}

								items={[
									{
										title: '已提交',
										description: '信件已成功接收',
										icon: <MailOutlined></MailOutlined>
									},
									{
										title: '处理中',
										description: '正在审核处理',
										icon: <SyncOutlined></SyncOutlined>
									},
									{
										title: '已办结',
										description: '信件处理完成',
										icon: <CheckCircleOutlined></CheckCircleOutlined>
									},
								]}
							/>
						</div>
					</>
				)}
			</main>
		</div>
	);
}
