import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import {
  Database,
  Link as LinkIcon,
  AlertTriangle,
  User,
  Mail,
  Bot,
  Calendar,
  Timer,
  Globe2,
  Video,
  Mic2,
  FileText,
  Clock,
  Activity,
} from "lucide-react";
import { formatDate } from "@/lib/utils";
import { type AdminMeetingDetail } from "@/lib/api/admin.api";
import { MetaRow, AssetRow, CheckLine } from "./MeetingDetailSubComponents";

interface SidebarSectionProps {
  meeting: AdminMeetingDetail;
  videoLoading: boolean;
  audioLoading: boolean;
  pdfLoading: boolean;
  handleDownloadVideo: () => void;
  handleDownloadAudio: () => void;
  handleDownloadPdf: () => void;
}

export function SidebarSection({
  meeting,
  videoLoading,
  audioLoading,
  pdfLoading,
  handleDownloadVideo,
  handleDownloadAudio,
  handleDownloadPdf,
}: SidebarSectionProps) {
  return (
    <aside className="space-y-4">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Database className="h-4 w-4 text-red-500" />
            Metadata
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <MetaRow icon={User} label={meeting.is_guest ? "User (Guest)" : "Owner / Host"} value={`${meeting.owner_name} (${meeting.user_email})`} />
          <MetaRow icon={Mail} label="User ID" value={String(meeting.user_id ?? "-")} />
          <MetaRow icon={Bot} label="Bot ID" value={meeting.bot_id} />
          <MetaRow icon={Calendar} label="Created" value={formatDate(meeting.created_at)} />
          <MetaRow icon={Timer} label="Scheduled" value={`${formatDate(meeting.scheduled_start)} - ${formatDate(meeting.scheduled_end)}`} />
          <MetaRow icon={Globe2} label="Timezone" value={meeting.timezone} />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <LinkIcon className="h-4 w-4 text-red-500" />
            Assets
          </CardTitle>
        </CardHeader>
        <CardContent className="divide-y divide-gray-100 dark:divide-gray-800 pb-2">
          <AssetRow
            icon={Video}
            label="Video recording"
            value={meeting.video_recording_url}
            actionText="Download MP4"
            onClick={meeting.video_recording_url ? handleDownloadVideo : undefined}
            isLoading={videoLoading}
            hideValue
          />
          <AssetRow
            icon={Mic2}
            label="Audio recording"
            value={meeting.recording_url}
            actionText="Download MP3"
            onClick={meeting.recording_url ? handleDownloadAudio : undefined}
            isLoading={audioLoading}
            hideValue
          />
          <AssetRow
            icon={FileText}
            label="Transcript"
            value={meeting.transcript_url}
            actionText="Download PDF"
            onClick={meeting.transcript_url ? handleDownloadPdf : undefined}
            isLoading={pdfLoading}
            hideValue
          />
          <AssetRow
            icon={Calendar}
            label="Calendar event"
            value={meeting.calendar_event_id}
          />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <AlertTriangle className="h-4 w-4 text-red-500" />
            Admin checks
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3 text-sm">
          <CheckLine label="Recording captured" ok={meeting.processing.recording === "ready"} />
          <CheckLine label="Transcript generated" ok={meeting.processing.transcript === "ready"} />
          <CheckLine label="Summary generated" ok={meeting.processing.summary === "ready"} />
          <Separator />
          <MetaRow icon={Clock} label="Silent time" value={`${meeting.analytics.silence_seconds}s`} />
          <MetaRow icon={Activity} label="Interruptions" value={String(meeting.analytics.interruptions)} />
        </CardContent>
      </Card>
    </aside>
  );
}