import React from 'react';
import { useShallow } from 'zustand/react/shallow';
import { Card, CardContent } from "@/components/ui/card";
import { Textarea } from "@/components/ui/textarea";
import { 
  Film, 
  Layout, 
  Users, 
  FileText
} from 'lucide-react';
import { useProjectStore } from '@/lib/store/project';

export const OverviewTab: React.FC = () => {
  const { description, assets, episodes, storyboards, updateProjectMeta } = useProjectStore(
    useShallow((s) => ({
      description: s.description,
      assets: s.assets,
      episodes: s.episodes,
      storyboards: s.storyboards,
      updateProjectMeta: s.updateProjectMeta,
    }))
  );

  return (
    <div className="space-y-8 animate-in fade-in duration-300">
      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card className="bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/20 dark:to-pink-950/20 border-purple-100 dark:border-purple-900/50">
          <CardContent className="pt-6">
            <div className="flex items-center gap-3 mb-2">
               <div className="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
                 <Film size={18} />
               </div>
               <h3 className="text-xs font-medium text-muted-foreground">剧集</h3>
            </div>
            <div className="text-xl font-bold ml-1">{episodes.length}</div>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 border-blue-100 dark:border-blue-900/50">
          <CardContent className="pt-6">
            <div className="flex items-center gap-3 mb-2">
               <div className="p-2 bg-blue-100 dark:bg-blue-900/50 rounded-lg text-blue-600 dark:text-blue-400">
                 <Layout size={18} />
               </div>
               <h3 className="text-xs font-medium text-muted-foreground">分镜</h3>
            </div>
            <div className="text-xl font-bold ml-1">{storyboards.length}</div>
          </CardContent>
        </Card>
        <Card className="bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-950/20 dark:to-amber-950/20 border-orange-100 dark:border-orange-900/50">
          <CardContent className="pt-6">
            <div className="flex items-center gap-3 mb-2">
               <div className="p-2 bg-orange-100 dark:bg-orange-900/50 rounded-lg text-orange-600 dark:text-orange-400">
                 <Users size={18} />
               </div>
               <h3 className="text-xs font-medium text-muted-foreground">素材</h3>
            </div>
            <div className="text-xl font-bold ml-1">{assets.length}</div>
          </CardContent>
        </Card>
      </div>

      <div className="grid grid-cols-1 gap-8">
        {/* 项目描述 */}
        <div className="space-y-4">
          <h3 className="text-lg font-semibold flex items-center gap-2">
            <FileText className="w-5 h-5 text-muted-foreground" /> 项目描述
          </h3>
          <Textarea 
            className="bg-muted/30 rounded-xl p-6 border leading-relaxed text-muted-foreground text-sm min-h-[120px] resize-none focus:bg-background transition-colors"
            value={description || ""}
            onChange={(e) => updateProjectMeta({ description: e.target.value })}
            placeholder="请输入项目描述..."
          />
        </div>
      </div>
    </div>
  );
};
