import AdminPage from '@/Components/admin/AdminPage';
import { Badge } from '@/Components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/Components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatDateTime, formatNumber } from '@/lib/format';
import type { AdminCannibalizationCasesShowProps } from '@/types/admin';

export default function CannibalizationCasesShow({ case: c }: AdminCannibalizationCasesShowProps) {
  return (
    <AdminLayout>
      <AdminPage
        title={c.query_cluster}
        subtitle={c.site_name ?? undefined}
        breadcrumbs={[
          { label: 'Admin', href: '/admin' },
          { label: 'Cannibalization Cases', href: route('admin.cannibalization-cases.index') },
          { label: `#${c.id}` },
        ]}
      >
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
          <div className="text-sm">
            <span className="text-muted-foreground">Status</span>
            <div className="mt-1 flex gap-1">
              <Badge variant={c.status === 'open' ? 'warning' : 'success'}>{c.status}</Badge>
              {c.lifecycle_status !== 'active' && (
                <Badge variant="outline">{c.lifecycle_status}</Badge>
              )}
            </div>
          </div>
          <div className="text-sm">
            <span className="text-muted-foreground">Impact Score</span>
            <div className="mt-1 font-medium">
              {c.impact_score !== null ? c.impact_score.toFixed(2) : '—'}
            </div>
          </div>
          <div className="text-sm">
            <span className="text-muted-foreground">Confidence Score</span>
            <div className="mt-1 font-medium">
              {c.confidence_score !== null ? c.confidence_score.toFixed(2) : '—'}
            </div>
          </div>
          <div className="text-sm">
            <span className="text-muted-foreground">Volatility Score</span>
            <div className="mt-1 font-medium">
              {c.lead_volatility_score !== null ? c.lead_volatility_score.toFixed(2) : '—'}
            </div>
          </div>
          <div className="text-sm">
            <span className="text-muted-foreground">Detected</span>
            <div className="mt-1 font-medium">{formatDateTime(c.created_at)}</div>
          </div>
        </div>

        {c.pages.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Competing Pages ({c.pages.length})</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>URL</TableHead>
                    <TableHead>Title</TableHead>
                    <TableHead>Impressions</TableHead>
                    <TableHead>Clicks</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {c.pages.map((page) => (
                    <TableRow key={page.id}>
                      <TableCell className="text-sm max-w-xs truncate">
                        {page.url ? (
                          <a
                            href={page.url}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="hover:underline text-primary"
                          >
                            {page.url}
                          </a>
                        ) : (
                          '—'
                        )}
                      </TableCell>
                      <TableCell className="text-sm">{page.title ?? '—'}</TableCell>
                      <TableCell className="text-sm">
                        {page.impressions !== null ? formatNumber(page.impressions) : '—'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {page.clicks !== null ? formatNumber(page.clicks) : '—'}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
              </div>
            </CardContent>
          </Card>
        )}

        {c.queries.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Queries</CardTitle>
            </CardHeader>
            <CardContent className="p-0">
              <div className="overflow-x-auto">
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Query</TableHead>
                    <TableHead>Impressions</TableHead>
                    <TableHead>Clicks</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {c.queries.map((q) => (
                    <TableRow key={q.id}>
                      <TableCell className="text-sm font-medium">{q.query}</TableCell>
                      <TableCell className="text-sm">
                        {q.impressions !== null ? formatNumber(q.impressions) : '—'}
                      </TableCell>
                      <TableCell className="text-sm">
                        {q.clicks !== null ? formatNumber(q.clicks) : '—'}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
              </div>
            </CardContent>
          </Card>
        )}

        {c.feedback.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Feedback</CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {c.feedback.map((fb) => (
                <div key={fb.id} className="text-sm border-b pb-3 last:border-0 last:pb-0">
                  {fb.rating !== null && (
                    <div className="font-medium">Rating: {fb.rating}/5</div>
                  )}
                  {fb.comment && <p className="text-muted-foreground mt-1">{fb.comment}</p>}
                  <div className="text-xs text-muted-foreground mt-1">
                    {fb.user_name ?? 'Anonymous'} · {formatDateTime(fb.created_at)}
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        )}
      </AdminPage>
    </AdminLayout>
  );
}