import { Download, Edit, FileText, Trash2, X } from 'lucide-react';

import { useEffect, useState } from 'react';

import { Head, Link, router } from '@inertiajs/react';

import SiteNav from '@/Components/Navigation/SiteNav';
import { Alert, AlertDescription } from '@/Components/ui/alert';
import { Badge } from '@/Components/ui/badge';
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/Components/ui/breadcrumb';
import { Button } from '@/Components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/Components/ui/dialog';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import { RadioGroup, RadioGroupItem } from '@/Components/ui/radio-group';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { CONTENT_BRIEF_DETAIL_VIEWED } from '@/lib/event-catalog';
import { formatDateTime, formatNumber } from '@/lib/format';
import {
  BRIEF_STATUS_LABELS as STATUS_LABELS,
  BRIEF_STATUS_VARIANTS as STATUS_VARIANTS,
} from '@/lib/status';
import type { SiteBasic } from '@/types';

interface ContentBrief {
  id: number;
  target_keyword: string;
  h1_recommendation: string | null;
  h2_structure: string[] | null;
  key_entities: string[] | null;
  target_word_count_min: number | null;
  target_word_count_max: number | null;
  internal_links: Array<{ url: string; anchor: string; context: string }> | null;
  audience_context: string | null;
  competitive_notes: string | null;
  custom_instructions: string | null;
  brief_content: string | null;
  status: string;
  generation_error: string | null;
  prompt_tokens: number | null;
  completion_tokens: number | null;
  model_used: string | null;
  generated_at: string | null;
  edited_at: string | null;
  created_at: string | null;
}

interface Source {
  type: string;
  id: number;
  name: string | null;
}

interface AiJob {
  id: number;
  status: string;
  model: string;
}

interface Props {
  site: SiteBasic;
  brief: ContentBrief;
  source: Source | null;
  aiJob: AiJob | null;
}

export default function ContentBriefShow({ site, brief, source, aiJob: _aiJob }: Props) {
  const [isEditMode, setIsEditMode] = useState(false);
  const [isExportModalOpen, setIsExportModalOpen] = useState(false);
  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
  const [isConverting, setIsConverting] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  useEffect(() => {
    trackProductEvent(CONTENT_BRIEF_DETAIL_VIEWED, { site_id: String(site.id) });
  }, [site.id]);
  const [exportFormat, setExportFormat] = useState<'markdown' | 'pdf' | 'google_docs'>('markdown');
  const [isExporting, setIsExporting] = useState(false);

  const handleExport = () => {
    setIsExporting(true);
    router.post(
      route('content-briefs.export', { site: site.id, contentBrief: brief.id }),
      { format: exportFormat },
      {
        preserveScroll: true,
        onSuccess: () => {
          setIsExportModalOpen(false);
          setIsExporting(false);
        },
        onError: () => {
          setIsExporting(false);
        },
      },
    );
  };

  const handleConvertToDraft = () => {
    setIsConverting(true);
    router.post(
      route('content-briefs.convertToDraft', { site: site.id, contentBrief: brief.id }),
      {},
      {
        preserveScroll: true,
        onFinish: () => setIsConverting(false),
      },
    );
  };

  const handleDelete = () => {
    setIsDeleting(true);
    router.delete(route('content-briefs.destroy', { site: site.id, contentBrief: brief.id }), {
      onSuccess: () => {
        router.visit(route('content-briefs.index', site.id));
      },
      onFinish: () => setIsDeleting(false),
    });
  };

  const isCompleted = brief.status === 'completed';
  const canExport = isCompleted && brief.h1_recommendation;
  const canConvertToDraft = isCompleted;

  return (
    <>
      <Head title={`${site.name} - ${brief.target_keyword}`} />

      <div className="container py-6">
        <SiteNav
          siteId={site.id}
          canAnalyze
          canRecommend
          canCannibalization
          canOpportunityMap
          canGeographic
          canDevice
        />

        {/* Breadcrumb Navigation */}
        <nav className="mb-4">
          <Breadcrumb>
            <BreadcrumbList>
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link href={route('dashboard')}>Dashboard</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbLink asChild>
                  <Link href={route('content-briefs.index', site.id)}>Content Briefs</Link>
                </BreadcrumbLink>
              </BreadcrumbItem>
              <BreadcrumbSeparator />
              <BreadcrumbItem>
                <BreadcrumbPage>{brief.target_keyword}</BreadcrumbPage>
              </BreadcrumbItem>
            </BreadcrumbList>
          </Breadcrumb>
        </nav>

        <div className="flex items-center gap-3 mb-2">
          <Button variant="outline" size="sm" asChild>
            <Link href={route('content-briefs.index', site.id)}>&larr; Back to Content Briefs</Link>
          </Button>
        </div>

        <div className="flex flex-wrap items-center gap-3 mb-1">
          <h1 className="text-2xl font-bold tracking-tight">{brief.target_keyword}</h1>
          <Badge variant={STATUS_VARIANTS[brief.status] ?? 'default'}>
            {STATUS_LABELS[brief.status] ?? brief.status}
          </Badge>
          {source && (
            <Badge variant="outline" className="font-normal">
              {source.type}
              {source.name && `: ${source.name}`}
            </Badge>
          )}
        </div>

        {brief.custom_instructions && (
          <p className="text-sm text-muted-foreground mb-4">
            Instructions: {brief.custom_instructions}
          </p>
        )}

        <div className="flex flex-wrap items-center gap-2 mb-6">
          {isCompleted && !isEditMode && (
            <Button variant="outline" size="sm" onClick={() => setIsEditMode(true)}>
              <Edit className="mr-2 h-4 w-4" />
              Edit
            </Button>
          )}
          {isEditMode && (
            <Button variant="outline" size="sm" onClick={() => setIsEditMode(false)}>
              <X className="mr-2 h-4 w-4" />
              Cancel Edit
            </Button>
          )}
          {canExport && (
            <Button variant="outline" size="sm" onClick={() => setIsExportModalOpen(true)}>
              <Download className="mr-2 h-4 w-4" />
              Export
            </Button>
          )}
          {canConvertToDraft && (
            <LoadingButton
              variant="outline"
              size="sm"
              onClick={handleConvertToDraft}
              loading={isConverting}
            >
              <FileText className="mr-2 h-4 w-4" />
              Convert to Draft
            </LoadingButton>
          )}
          <Button variant="outline" size="sm" onClick={() => setIsDeleteModalOpen(true)}>
            <Trash2 className="mr-2 h-4 w-4" />
            Delete
          </Button>
        </div>

        {brief.generation_error && brief.status === 'failed' && (
          <Alert variant="destructive" className="mb-6">
            <AlertDescription>
              <strong>Generation Failed:</strong> {brief.generation_error}
            </AlertDescription>
          </Alert>
        )}

        {brief.status === 'pending' && (
          <Alert className="mb-6">
            <AlertDescription>
              Content brief is queued for generation. Please check back in a moment.
            </AlertDescription>
          </Alert>
        )}

        {brief.status === 'generating' && (
          <Alert className="mb-6">
            <AlertDescription>
              Content brief is currently being generated. This may take a minute.
            </AlertDescription>
          </Alert>
        )}

        {isCompleted && brief.h1_recommendation && (
          <div className="space-y-6">
            {/* H1 Recommendation */}
            <Card>
              <CardHeader>
                <CardTitle>Recommended H1</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-lg font-semibold">{brief.h1_recommendation}</p>
              </CardContent>
            </Card>

            {/* H2 Structure - Recommended Structure */}
            {brief.h2_structure && brief.h2_structure.length > 0 && (
              <Card className="border-primary/20 bg-gradient-to-br from-primary/5 to-transparent">
                <CardHeader>
                  <div className="flex items-center gap-2">
                    <Badge variant="default" className="text-xs">
                      Recommended Structure
                    </Badge>
                  </div>
                  <CardTitle>Content Outline</CardTitle>
                  <CardDescription>
                    Suggested heading hierarchy and section organization
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <ol className="list-decimal list-inside space-y-2">
                    {brief.h2_structure.map((h2, index) => (
                      <li key={index} className="text-sm font-medium">
                        {h2}
                      </li>
                    ))}
                  </ol>
                </CardContent>
              </Card>
            )}

            <div className="grid gap-6 lg:grid-cols-2">
              {/* Key Entities */}
              {brief.key_entities && brief.key_entities.length > 0 && (
                <Card>
                  <CardHeader>
                    <CardTitle>Key Entities to Cover</CardTitle>
                    <CardDescription>Important topics and concepts</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="flex flex-wrap gap-2">
                      {brief.key_entities.map((entity, index) => (
                        <Badge key={index} variant="secondary">
                          {entity}
                        </Badge>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              )}

              {/* Target Word Count */}
              {brief.target_word_count_min != null && brief.target_word_count_max != null && (
                <Card>
                  <CardHeader>
                    <CardTitle>Target Word Count</CardTitle>
                    <CardDescription>Recommended content length</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <p className="text-2xl font-bold">
                      {formatNumber(brief.target_word_count_min)} -{' '}
                      {formatNumber(brief.target_word_count_max)}
                    </p>
                    <p className="text-sm text-muted-foreground mt-1">words</p>
                  </CardContent>
                </Card>
              )}
            </div>

            {/* Internal Links */}
            {brief.internal_links && brief.internal_links.length > 0 && (
              <Card>
                <CardHeader>
                  <CardTitle>Internal Linking Targets</CardTitle>
                  <CardDescription>Recommended internal links to include</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {brief.internal_links.map((link, index) => (
                      <div key={index} className="border-l-2 border-primary pl-4">
                        <p className="font-medium">{link.anchor}</p>
                        <p className="text-sm text-muted-foreground break-all">{link.url}</p>
                        {link.context && (
                          <p className="text-xs text-muted-foreground mt-1">{link.context}</p>
                        )}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* Audience Context */}
            {brief.audience_context && (
              <Card>
                <CardHeader>
                  <CardTitle>Audience Context</CardTitle>
                  <CardDescription>Target audience and writing approach</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm whitespace-pre-wrap">{brief.audience_context}</p>
                </CardContent>
              </Card>
            )}

            {/* Competitive Notes */}
            {brief.competitive_notes && (
              <Card>
                <CardHeader>
                  <CardTitle>Competitive Positioning</CardTitle>
                  <CardDescription>How to differentiate from competitors</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="rounded-md bg-muted p-4">
                    <p className="text-sm whitespace-pre-wrap">{brief.competitive_notes}</p>
                  </div>
                </CardContent>
              </Card>
            )}

            {/* AI Usage Stats */}
            {(brief.prompt_tokens != null ||
              brief.completion_tokens != null ||
              brief.model_used) && (
              <div className="rounded-lg border bg-card p-4">
                <h3 className="text-sm font-medium mb-2">Generation Details</h3>
                <div className="flex flex-wrap items-center gap-4 text-xs text-muted-foreground">
                  {brief.model_used && <span>Model: {brief.model_used}</span>}
                  {brief.prompt_tokens != null && brief.completion_tokens != null && (
                    <span>
                      Tokens: {formatNumber(brief.prompt_tokens + brief.completion_tokens)}
                    </span>
                  )}
                  {brief.generated_at && (
                    <span>Generated: {formatDateTime(brief.generated_at)}</span>
                  )}
                </div>
              </div>
            )}
          </div>
        )}

        {!isCompleted && !brief.generation_error && (
          <Card>
            <CardContent className="pt-6">
              <p className="text-sm text-muted-foreground text-center">
                Brief details will appear here once generation is complete.
              </p>
            </CardContent>
          </Card>
        )}
      </div>

      {/* Export Modal */}
      <Dialog open={isExportModalOpen} onOpenChange={setIsExportModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Export Content Brief</DialogTitle>
            <DialogDescription>Choose a format to export your content brief</DialogDescription>
          </DialogHeader>
          <div className="py-4">
            <RadioGroup
              value={exportFormat}
              onValueChange={(value) => setExportFormat(value as typeof exportFormat)}
            >
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="markdown" id="markdown" />
                <Label htmlFor="markdown">Markdown (.md)</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="pdf" id="pdf" />
                <Label htmlFor="pdf">PDF (.pdf)</Label>
              </div>
              <div className="flex items-center space-x-2">
                <RadioGroupItem value="google_docs" id="google_docs" />
                <Label htmlFor="google_docs">Google Docs (HTML)</Label>
              </div>
            </RadioGroup>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setIsExportModalOpen(false)}
              disabled={isExporting}
            >
              Cancel
            </Button>
            <Button onClick={handleExport} disabled={isExporting}>
              {isExporting ? 'Exporting...' : 'Export'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Delete Modal */}
      <Dialog open={isDeleteModalOpen} onOpenChange={setIsDeleteModalOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Content Brief</DialogTitle>
            <DialogDescription>
              Deleting this brief will remove the outline, keyword targets, and any associated
              notes. Any AI drafts created from it will remain. This cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setIsDeleteModalOpen(false)}
              disabled={isDeleting}
            >
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDelete} disabled={isDeleting}>
              {isDeleting ? 'Deleting...' : 'Delete'}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  );
}

ContentBriefShow.layout = (page: React.ReactNode) => <DashboardLayout>{page}</DashboardLayout>;