import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import Sidebar from '../components/Sidebar';
import { Printer, Edit, ChevronLeft } from 'lucide-react';
import { User, Report } from '../types';
import { storage } from '../utils/storage';

export default function ReportView() {
  const { id } = useParams();
  const navigate = useNavigate();
  const [report, setReport] = useState<Report | null>(null);
  const [currentUser, setCurrentUser] = useState<User | null>(null);

  useEffect(() => {
    const user = storage.get<User | null>('currentUser', null);
    if (!user) {
      navigate('/');
      return;
    }
    setCurrentUser(user);

    const reports = storage.get<Report[]>('reports', []);
    const found = reports.find(r => r.id === id);
    
    if (!found) {
      alert('报告不存在');
      navigate('/report-manage');
      return;
    }

    if (user.role === 'user' && found.author !== user.username) {
      alert('您没有权限查看此报告');
      navigate('/report-manage');
      return;
    }

    setReport(found);
  }, [id, navigate]);

  if (!report || !currentUser) return null;

  const canEdit = currentUser.role !== 'user' || report.author === currentUser.username;

  return (
    <div className="flex min-h-screen bg-bg">
      <Sidebar />
      
      <main className="flex-1 p-10 overflow-y-auto">
        <div className="flex justify-between items-center mb-8 print:hidden">
          <div className="flex items-center gap-4">
            <button 
              onClick={() => navigate('/report-manage')}
              className="p-2 rounded-lg hover:bg-slate-100 text-text-muted transition-colors"
            >
              <ChevronLeft size={24} />
            </button>
            <div>
              <h1 className="text-2xl font-bold tracking-tight text-text-main">查看报告</h1>
              <p className="text-text-muted text-sm mt-1 uppercase tracking-wider font-bold">报告编号: {report.id}</p>
            </div>
          </div>
          <div className="flex gap-3">
            {canEdit && (
              <button 
                onClick={() => navigate(`/report-editor?id=${report.id}`)}
                className="px-6 py-2.5 bg-slate-100 text-text-muted rounded-lg text-sm font-semibold hover:bg-slate-200 transition-colors inline-flex items-center gap-2"
              >
                <Edit size={16} />
                编辑报告
              </button>
            )}
            <button 
              onClick={() => window.print()}
              className="btn-accent inline-flex items-center gap-2"
            >
              <Printer size={16} />
              打印报告
            </button>
          </div>
        </div>
        
        <div className="bg-white rounded-2xl shadow-[0_10px_25px_-5px_rgba(0,0,0,0.05)] p-12 max-w-[900px] mx-auto print:shadow-none print:p-0 print:m-0">
          <div className="text-center pb-10 border-b border-border mb-10">
            <h2 className="text-3xl font-bold text-text-main mb-6">{report.title}</h2>
            <div className="flex justify-center gap-8 flex-wrap">
              <div className="flex flex-col items-center gap-1">
                <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">患者姓名</span>
                <span className="text-sm font-bold text-text-main">{report.patientName}</span>
              </div>
              <div className="flex flex-col items-center gap-1">
                <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">创建者</span>
                <span className="text-sm font-bold text-text-main">{report.authorName}</span>
              </div>
              <div className="flex flex-col items-center gap-1">
                <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">创建时间</span>
                <span className="text-sm font-bold text-text-main">{report.createdAt}</span>
              </div>
              <div className="flex flex-col items-center gap-1">
                <span className="text-[10px] font-bold text-text-muted uppercase tracking-wider">报告状态</span>
                <span className={`px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${
                  report.status === 'draft' ? 'bg-amber-100 text-amber-700' : 'bg-green-100 text-green-700'
                }`}>
                  {report.status === 'draft' ? '草稿' : '已完成'}
                </span>
              </div>
            </div>
          </div>
          
          <div 
            className="report-content leading-relaxed text-text-main text-sm"
            dangerouslySetInnerHTML={{ __html: report.content }}
          />
        </div>
      </main>
    </div>
  );
}
