"use client"

import { useQuery } from "convex/react"
import { useState } from "react"
import { api } from "@/convex/_generated/api"
import { useProject } from "@/components/project-context"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { Button } from "@/components/ui/button"
import { useMutation } from "convex/react"

export default function Page() {
    const { selectedProjectId } = useProject()
    const projects = useQuery(api.projects.getProjects)
    const dataSources = useQuery(
        api.dataSources.getProjectDataSources,
        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
    )
    const searchContext = useQuery(
        api.projects.getSearchContext,
        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
    )
    const updateDataSourceStatus = useMutation(api.dataSources.updateDataSourceStatus)
    const createAnalysis = useMutation(api.analyses.createAnalysis)
    const [reanalyzingId, setReanalyzingId] = useState<string | null>(null)
    const analysis = useQuery(
        api.analyses.getLatestByProject,
        selectedProjectId ? { projectId: selectedProjectId as any } : "skip"
    )

    const selectedProject = projects?.find((project) => project._id === selectedProjectId)
    const selectedSourceIds = selectedProject?.dorkingConfig?.selectedSourceIds || []
    const isLoading = selectedProjectId && analysis === undefined

    if (!selectedProjectId && projects && projects.length === 0) {
        return (
            <div className="flex flex-1 items-center justify-center p-10 text-center">
                <div className="space-y-2">
                    <h2 className="text-xl font-semibold">No projects yet</h2>
                    <p className="text-muted-foreground">Complete onboarding to create your first project.</p>
                </div>
            </div>
        )
    }

    if (isLoading) {
        return (
            <div className="flex flex-1 items-center justify-center p-10 text-center text-muted-foreground">
                Loading analysis...
            </div>
        )
    }

    if (!analysis) {
        return (
            <div className="flex flex-1 items-center justify-center p-10 text-center">
                <div className="space-y-2">
                    <h2 className="text-xl font-semibold">No analysis yet</h2>
                    <p className="text-muted-foreground">Run onboarding to analyze a product for this project.</p>
                </div>
            </div>
        )
    }

    const handleReanalyze = async (source: any) => {
        if (!selectedProjectId) return

        setReanalyzingId(source._id)
        await updateDataSourceStatus({
            dataSourceId: source._id,
            analysisStatus: "pending",
            lastError: undefined,
            lastAnalyzedAt: undefined,
        })

        try {
            const response = await fetch("/api/analyze", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ url: source.url }),
            })

            const data = await response.json()

            if (!response.ok) {
                await updateDataSourceStatus({
                    dataSourceId: source._id,
                    analysisStatus: "failed",
                    lastError: data.error || "Analysis failed",
                    lastAnalyzedAt: Date.now(),
                })
                return
            }

            await createAnalysis({
                projectId: selectedProjectId as any,
                dataSourceId: source._id,
                analysis: data.data,
            })

            await updateDataSourceStatus({
                dataSourceId: source._id,
                analysisStatus: "completed",
                lastError: undefined,
                lastAnalyzedAt: Date.now(),
            })
        } finally {
            setReanalyzingId(null)
        }
    }

    return (
        <div className="flex flex-1 flex-col gap-6 p-4 lg:p-8">
            <div className="space-y-2">
                <div className="flex items-center gap-2">
                    <h1 className="text-2xl font-semibold">{analysis.productName}</h1>
                    {selectedProject?.name && (
                        <Badge variant="outline">{selectedProject.name}</Badge>
                    )}
                </div>
                <p className="text-muted-foreground">{analysis.tagline}</p>
                <p className="max-w-3xl text-sm text-muted-foreground">{analysis.description}</p>
            </div>

            {searchContext?.missingSources?.length > 0 && (
                <Alert>
                    <AlertDescription>
                        Some selected sources don&apos;t have analysis yet. Run onboarding or re-analyze them for best results.
                    </AlertDescription>
                </Alert>
            )}

            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-5">
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm">Features</CardTitle>
                    </CardHeader>
                    <CardContent className="text-2xl font-semibold">{analysis.features.length}</CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm">Keywords</CardTitle>
                    </CardHeader>
                    <CardContent className="text-2xl font-semibold">{analysis.keywords.length}</CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm">Personas</CardTitle>
                    </CardHeader>
                    <CardContent className="text-2xl font-semibold">{analysis.personas.length}</CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm">Competitors</CardTitle>
                    </CardHeader>
                    <CardContent className="text-2xl font-semibold">{analysis.competitors.length}</CardContent>
                </Card>
                <Card>
                    <CardHeader className="pb-2">
                        <CardTitle className="text-sm">Use Cases</CardTitle>
                    </CardHeader>
                    <CardContent className="text-2xl font-semibold">{analysis.useCases.length}</CardContent>
                </Card>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle className="text-base">Data Sources</CardTitle>
                </CardHeader>
                <CardContent className="space-y-2 text-sm text-muted-foreground">
                    {dataSources && dataSources.length > 0 ? (
                        dataSources.map((source: any) => (
                            <div key={source._id} className="flex items-center justify-between gap-3">
                                <span className="truncate">{source.name || source.url}</span>
                                <div className="flex items-center gap-2">
                                    <Badge variant={selectedSourceIds.includes(source._id) ? "secondary" : "outline"}>
                                        {selectedSourceIds.includes(source._id) ? "active" : "inactive"}
                                    </Badge>
                                    <Badge variant={source.analysisStatus === "completed" ? "secondary" : "outline"}>
                                        {source.analysisStatus}
                                    </Badge>
                                    <Button
                                        size="sm"
                                        variant="outline"
                                        onClick={() => handleReanalyze(source)}
                                        disabled={reanalyzingId === source._id}
                                    >
                                        {reanalyzingId === source._id ? "Analyzing..." : "Re-analyze"}
                                    </Button>
                                </div>
                            </div>
                        ))
                    ) : (
                        <p>No data sources yet. Add a source during onboarding.</p>
                    )}
                </CardContent>
            </Card>

            {searchContext?.context && (
                <Card>
                    <CardHeader>
                        <CardTitle className="text-base">Aggregated Context</CardTitle>
                    </CardHeader>
                    <CardContent className="grid gap-3 text-sm text-muted-foreground md:grid-cols-2">
                        <div>Keywords: <span className="text-foreground font-medium">{searchContext.context.keywords.length}</span></div>
                        <div>Problems: <span className="text-foreground font-medium">{searchContext.context.problemsSolved.length}</span></div>
                        <div>Competitors: <span className="text-foreground font-medium">{searchContext.context.competitors.length}</span></div>
                        <div>Use Cases: <span className="text-foreground font-medium">{searchContext.context.useCases.length}</span></div>
                    </CardContent>
                </Card>
            )}

            <div className="grid gap-4 lg:grid-cols-2">
                <Card>
                    <CardHeader>
                        <CardTitle className="text-base">Top Features</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                        {analysis.features.slice(0, 6).map((feature, index) => (
                            <div key={`${feature.name}-${index}`} className="flex items-start gap-2">
                                <span className="mt-1 h-2 w-2 rounded-full bg-primary" />
                                <div>
                                    <p className="text-sm font-medium">{feature.name}</p>
                                    <p className="text-xs text-muted-foreground">{feature.description}</p>
                                </div>
                            </div>
                        ))}
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader>
                        <CardTitle className="text-base">Top Problems Solved</CardTitle>
                    </CardHeader>
                    <CardContent className="space-y-2">
                        {analysis.problemsSolved.slice(0, 6).map((problem, index) => (
                            <div key={`${problem.problem}-${index}`} className="flex items-start gap-2">
                                <span className="mt-1 h-2 w-2 rounded-full bg-primary" />
                                <div>
                                    <p className="text-sm font-medium">{problem.problem}</p>
                                    <p className="text-xs text-muted-foreground">{problem.emotionalImpact}</p>
                                </div>
                            </div>
                        ))}
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}