import React from "react";
import { Stack, Box, Typography, Chip } from "@mui/material";
import ListAltIcon from "@mui/icons-material/ListAlt";
import { PodcastAnalysis } from "../../types";
import { AnalysisTabContent } from "../AnalysisTabNav";
import { TextToSpeechButton } from "../../../shared/TextToSpeechButton";

interface OutlineTabProps {
  analysis: PodcastAnalysis;
  isEditing?: boolean;
  onUpdateOutline?: (id: string | number, field: 'title' | 'segments', value: any) => void;
}

export const OutlineTab: React.FC<OutlineTabProps> = ({ analysis, isEditing, onUpdateOutline }) => {
  const outlineText = analysis.suggestedOutlines?.map((outline, idx) => {
    const segments = outline.segments?.map((s, sIdx) => `${sIdx + 1}. ${s}`).join(" ");
    return `Option ${idx + 1}: ${outline.title}. ${segments}`;
  }).join(" ") || "";

  return (
    <AnalysisTabContent title="Episode Outline" icon={<ListAltIcon />}>
      <Stack spacing={3}>
        {analysis.suggestedOutlines?.map((outline: { id?: string | number; title: string; segments: string[] }, idx: number) => (
          <Box key={outline.id || idx} sx={{ p: 2, bgcolor: "#f8fafc", borderRadius: 2, border: "1px solid rgba(0,0,0,0.08)" }}>
            <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1.5 }}>
              <Typography variant="subtitle2" sx={{ color: "#0f172a", fontWeight: 700 }}>
                Option {idx + 1}: {outline.title}
              </Typography>
              <TextToSpeechButton 
                text={`Option ${idx + 1}: ${outline.title}. ${outline.segments?.map((s, sIdx) => `Step ${sIdx + 1}: ${s}`).join(" ")}`}
                size="small" 
              />
            </Stack>
            <Stack spacing={1}>
              {outline.segments?.map((segment: string, sIdx: number) => (
                <Box key={sIdx} sx={{ display: "flex", alignItems: "flex-start", gap: 1 }}>
                  <Chip label={sIdx + 1} size="small" sx={{ minWidth: 24, bgcolor: "#4f46e5", color: "#fff" }} />
                  <Typography variant="body2" sx={{ color: "#475569" }}>
                    {segment}
                  </Typography>
                </Box>
              ))}
            </Stack>
          </Box>
        ))}
      </Stack>
    </AnalysisTabContent>
  );
};