import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Separator } from "@/components/ui/separator";
import { MessageSquareText, ListChecks, Activity } from "lucide-react";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";
import { DetailList } from "./MeetingDetailSubComponents";

interface OverviewTabProps {
  meeting: AdminMeetingDetail;
  completedCount: number;
}

export function OverviewTab({ meeting, completedCount }: OverviewTabProps) {
  return (
    <div className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <MessageSquareText className="h-4 w-4 text-red-500" />
            Meeting summary
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-5">
          <p className="text-sm leading-6 text-gray-600 dark:text-gray-300">
            {meeting.summary.overview || "No summary overview available."}
          </p>
          <div className="grid gap-4 md:grid-cols-2">
            <DetailList title="Decisions" items={meeting.summary.decisions} tone="green" />
            <DetailList title="Risks" items={meeting.summary.risks} tone="yellow" />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <ListChecks className="h-4 w-4 text-red-500" />
            Action items
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {meeting.summary.action_items.length > 0 ? (
            meeting.summary.action_items.map((item) => (
              <div
                key={item.task}
                className="grid gap-3 rounded-lg border border-gray-200 p-3 text-sm dark:border-gray-800 md:grid-cols-[1fr_140px_110px]"
              >
                <div>
                  <p className="font-medium text-gray-900 dark:text-gray-100">{item.task}</p>
                  <p className="text-xs text-gray-500 dark:text-gray-400">{item.owner}</p>
                </div>
                <span className="text-gray-600 dark:text-gray-300">{item.due}</span>
                <Badge
                  variant={
                    item.status === "done"
                      ? "success"
                      : item.status === "in_progress"
                      ? "warning"
                      : "secondary"
                  }
                >
                  {item.status.replace("_", " ")}
                </Badge>
              </div>
            ))
          ) : (
            <p className="text-sm text-gray-500 dark:text-gray-400 italic">No action items defined.</p>
          )}
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Activity className="h-4 w-4 text-red-500" />
            Analytics
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-6">
          {/* Talk ratio */}
          <div className="space-y-4">
            <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400">Talk Ratio</h4>
            {meeting.analytics.talk_ratio.length > 0 ? (
              meeting.analytics.talk_ratio.map((speaker) => (
                <div key={speaker.name} className="space-y-1.5">
                  <div className="flex justify-between text-xs font-medium text-gray-600 dark:text-gray-400">
                    <span>{speaker.name}</span>
                    <span>{speaker.value}%</span>
                  </div>
                  <Progress value={speaker.value} className="h-2 bg-red-100 dark:bg-red-950/30" />
                </div>
              ))
            ) : (
              <p className="text-xs text-gray-400 italic">No talk ratio data available.</p>
            )}
          </div>

          <Separator className="dark:bg-gray-800" />

          {/* Additional metrics */}
          <div className="grid grid-cols-3 gap-4">
            <div className="rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 p-3 text-center">
              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Silence</p>
              <p className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">
                {meeting.analytics.silence_seconds > 60
                  ? `${Math.floor(meeting.analytics.silence_seconds / 60)}m ${meeting.analytics.silence_seconds % 60}s`
                  : `${meeting.analytics.silence_seconds}s`}
              </p>
            </div>
            <div className="rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 p-3 text-center">
              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">Interruptions</p>
              <p className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">
                {meeting.analytics.interruptions}
              </p>
            </div>
            <div className="rounded-xl border border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 p-3 text-center">
              <p className="text-xs font-medium text-gray-500 dark:text-gray-400">AI Confidence</p>
              <p className="text-base md:text-lg font-bold text-gray-900 dark:text-gray-100 mt-1">
                {meeting.analytics.ai_confidence}%
              </p>
            </div>
          </div>

          {meeting.analytics.keywords.length > 0 && (
            <>
              <Separator className="dark:bg-gray-800" />
              <div className="space-y-2">
                <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-400">Keywords</h4>
                <div className="flex flex-wrap gap-1.5">
                  {meeting.analytics.keywords.map((keyword) => (
                    <Badge key={keyword} variant="outline" className="bg-gray-50/50 dark:bg-gray-900/50 capitalize">
                      {keyword}
                    </Badge>
                  ))}
                </div>
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}