import { BarChart3, TrendingUp } from 'lucide-react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/Components/ui/card';

interface BrandingPreviewProps {
  companyName: string;
  logoUrl: string | null;
  primaryColor: string;
  secondaryColor: string;
  removeRankwizBranding: boolean;
}

export default function BrandingPreview({
  companyName,
  logoUrl,
  primaryColor,
  secondaryColor,
  removeRankwizBranding,
}: BrandingPreviewProps) {
  const displayName = companyName.trim() || 'Your Company';

  return (
    <Card>
      <CardHeader>
        <CardTitle>Preview</CardTitle>
        <CardDescription>See how your branding will appear on reports and exports</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="rounded-lg border bg-background p-6 space-y-6">
          {/* Report Header — mirrors ReportExportService::buildHtml() header logic */}
          <div
            className="text-center border-b pb-4"
            style={{ borderBottomColor: primaryColor, borderBottomWidth: 3 }}
          >
            {/* Header mirrors ReportExportService::buildHtml() — h1 matches backend heading level */}
            {!removeRankwizBranding ? (
              <>
                <h1 className="text-2xl font-bold" style={{ color: primaryColor }}>
                  RankWiz AI
                </h1>
                <p className="text-sm text-muted-foreground">SEO Report</p>
              </>
            ) : logoUrl ? (
              <img
                src={logoUrl}
                alt={`${displayName} logo`}
                className="max-h-16 max-w-[160px] object-contain mx-auto"
              />
            ) : (
              <h1 className="text-2xl font-bold" style={{ color: primaryColor }}>
                {displayName}
              </h1>
            )}
          </div>

          {/* Sample Content - Summary Cards */}
          <div className="grid grid-cols-3 gap-4">
            <div className="rounded-lg border p-4">
              <div className="flex items-center gap-2 mb-2">
                <div
                  className="p-1.5 rounded"
                  style={{ backgroundColor: `${primaryColor}20`, color: primaryColor }}
                >
                  <TrendingUp className="h-4 w-4" />
                </div>
                <h3 className="text-sm font-medium">Total Clicks</h3>
              </div>
              <p className="text-2xl font-bold">12,456</p>
              <p className="text-xs text-muted-foreground mt-1">
                <span style={{ color: primaryColor }}>+23.4%</span> vs previous period
              </p>
            </div>

            <div className="rounded-lg border p-4">
              <div className="flex items-center gap-2 mb-2">
                <div
                  className="p-1.5 rounded"
                  style={{ backgroundColor: `${secondaryColor}20`, color: secondaryColor }}
                >
                  <BarChart3 className="h-4 w-4" />
                </div>
                <h3 className="text-sm font-medium">Avg. CTR</h3>
              </div>
              <p className="text-2xl font-bold">4.8%</p>
              <p className="text-xs text-muted-foreground mt-1">
                <span style={{ color: secondaryColor }}>+1.2%</span> vs previous period
              </p>
            </div>

            <div className="rounded-lg border p-4">
              <div className="flex items-center gap-2 mb-2">
                <div
                  className="p-1.5 rounded"
                  style={{ backgroundColor: `${primaryColor}20`, color: primaryColor }}
                >
                  <TrendingUp className="h-4 w-4" />
                </div>
                <h3 className="text-sm font-medium">Impressions</h3>
              </div>
              <p className="text-2xl font-bold">259,431</p>
              <p className="text-xs text-muted-foreground mt-1">
                <span style={{ color: primaryColor }}>+18.7%</span> vs previous period
              </p>
            </div>
          </div>

          {/* Sample Chart Area */}
          <div className="rounded-lg border p-4">
            <h3 className="text-sm font-medium mb-3">Performance Trend</h3>
            <div className="h-32 flex items-end justify-between gap-2">
              {[40, 65, 55, 80, 70, 85, 75, 90].map((height, i) => (
                <div
                  key={i}
                  className="flex-1 rounded-t transition-all"
                  style={{
                    height: `${height}%`,
                    backgroundColor: i % 2 === 0 ? primaryColor : secondaryColor,
                    opacity: 0.8,
                  }}
                />
              ))}
            </div>
            <div className="flex justify-between mt-2 text-xs text-muted-foreground">
              <span>Week 1</span>
              <span>Week 2</span>
              <span>Week 3</span>
              <span>Week 4</span>
            </div>
          </div>

          {/* Report Footer — mirrors ReportExportService::buildHtml() footer logic */}
          <div className="pt-4 border-t text-center text-xs text-muted-foreground">
            {removeRankwizBranding ? (
              <p>
                Generated by <strong>{displayName}</strong>
              </p>
            ) : (
              <p>
                Generated by <strong>RankWiz AI</strong> | SEO Diagnostic &amp; Content Optimization
                Platform
              </p>
            )}
          </div>
        </div>
      </CardContent>
    </Card>
  );
}