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

import { Button } from '@/Components/ui/button';
import DashboardLayout from '@/Layouts/DashboardLayout';

interface Template {
  id: number;
  name: string;
  description: string | null;
  sections: string[];
  filters: Record<string, unknown>;
  is_system: boolean;
  created_at: string;
  updated_at: string;
}

interface ShowProps {
  template: Template;
}

export default function ReportTemplatesShow({ template }: ShowProps) {
  return (
    <DashboardLayout>
      <Head title={`${template.name} - Report Template`} />

      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-3xl font-bold text-foreground">{template.name}</h1>
            {template.description && (
              <p className="mt-2 text-sm text-muted-foreground">{template.description}</p>
            )}
          </div>
          <Link href={route('report-templates.index')}>
            <Button variant="outline">Back to Templates</Button>
          </Link>
        </div>

        <div className="rounded-lg border border-border bg-card p-6">
          <div className="space-y-4">
            <div>
              <h3 className="text-sm font-semibold text-foreground">Sections</h3>
              <div className="mt-2 flex flex-wrap gap-2">
                {template.sections.map((section) => (
                  <span
                    key={section}
                    className="inline-block rounded bg-info/10 px-3 py-1 text-sm font-medium text-info"
                  >
                    {section.replace(/_/g, ' ')}
                  </span>
                ))}
              </div>
            </div>

            {template.is_system && (
              <div className="rounded-md bg-info/5 p-3 text-sm text-info">
                This is a system template and cannot be modified.
              </div>
            )}
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}
