import { format } from 'date-fns';
import { Check, X } from 'lucide-react';
import { cn } from '@/lib/utils';

export function PublicFormReportGenerator({ report }) {
  if (!report) return null;

  const { report_data, public_form_templates } = report;
  const fields = report_data?.fields_snapshot || [];
  const values = report_data?.submission_values || {};
  const metadata = report_data?.metadata || {};
  const settings = public_form_templates?.report_styling || {};

  return (
    <div className="bg-card shadow-lg max-w-[210mm] mx-auto min-h-[297mm] p-8 md:p-12 print:p-0 print:shadow-none" id="report-content">
      {/* Header */}
      <div className="border-b-2 border-foreground pb-6 mb-8">
        <div className="flex justify-between items-start">
          <div>
            <h1 className="text-3xl font-bold text-foreground mb-2">{public_form_templates?.title}</h1>
            <p className="text-muted-foreground text-sm">Submission Report</p>
          </div>
          <div className="text-right text-sm text-muted-foreground">
            <div><span className="font-semibold">Date:</span> {metadata.submitted_at ? format(new Date(metadata.submitted_at), 'PPP') : 'N/A'}</div>
            <div><span className="font-semibold">Time:</span> {metadata.submitted_at ? format(new Date(metadata.submitted_at), 'p') : 'N/A'}</div>
            <div className="mt-1 font-mono text-xs text-muted-foreground/60">ID: {metadata.submission_id?.slice(0, 8)}</div>
          </div>
        </div>
      </div>

      {/* Body */}
      <div className="space-y-6">
        {fields.map((field, idx) => {
          if (field.type === 'header') {
            return (
              <div key={idx} className="pt-4 pb-2 mt-4 border-b border-border">
                <h2 className="text-xl font-bold text-foreground" style={{ color: settings.headerColor }}>
                  {field.label || field.content}
                </h2>
              </div>
            );
          }

          if (field.type === 'paragraph') {
            return (
              <div key={idx} className="text-muted-foreground italic text-sm">
                {field.label || field.content}
              </div>
            );
          }

          if (['spacer', 'horizontal_line'].includes(field.type)) return null;

          const value = values[field.id];

          return (
            <div key={idx} className={cn(
              "grid grid-cols-1 md:grid-cols-12 gap-4 py-3 border-b border-border/50 last:border-0",
              field.type === 'textarea' || field.type === 'signature' ? "items-start" : "items-center"
            )}>
              <div className="md:col-span-4 text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                {field.label}
              </div>
              <div className="md:col-span-8 text-base text-foreground font-medium">
                {field.type === 'checkbox' ? (
                  <div className="flex items-center gap-2">
                    {value ? (
                      <span className="flex items-center text-green-700"><Check className="w-4 h-4 mr-1" /> Yes</span>
                    ) : (
                      <span className="flex items-center text-muted-foreground"><X className="w-4 h-4 mr-1" /> No</span>
                    )}
                  </div>
                ) : field.type === 'signature' ? (
                  value ? (
                    <div className="border rounded p-2 bg-muted inline-block">
                      <img src={value} alt="Signature" className="max-h-24 max-w-full" />
                    </div>
                  ) : <span className="text-muted-foreground italic">Not signed</span>
                ) : field.type === 'time' && typeof value === 'object' ? (
                  <span>{value.time} <span className="text-xs text-muted-foreground">({value.timezone})</span></span>
                ) : (
                  <div className="whitespace-pre-wrap">{value || <span className="text-muted-foreground/50">-</span>}</div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer */}
      <div className="mt-12 pt-6 border-t border-border text-center text-xs text-muted-foreground">
        Generated • {format(new Date(), 'PP pp')}
      </div>
    </div>
  );
}

export default PublicFormReportGenerator;
