'use client';

import { Download, ShieldCheck, ToggleLeft, Upload } from 'lucide-react';
import { Badge, Button } from '@/components/ui/Primitives';
import { HermesShell, MetricCard, SectionCard } from '@/components/hermes-shell';
import { getHermesSettings } from '@/lib/hermes';

function exportSettings() {
  const blob = new Blob([JSON.stringify(getHermesSettings(), null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `hermes-settings-${new Date().toISOString().slice(0, 10)}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

export default function HermesSettingsPage() {
  const settings = getHermesSettings();

  return (
    <HermesShell
      title="Settings & Configuration"
      description="Editable-looking control panels for registry data, policy knobs, notification rules, and import/export workflow."
      actions={<Button variant="secondary" onClick={exportSettings}><Download className="mr-2 h-4 w-4" />Export JSON</Button>}
    >
      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <MetricCard label="Demo mode" value={settings.demoMode ? 'Enabled' : 'Off'} tone={settings.demoMode ? 'warning' : 'success'} icon={<ToggleLeft className="h-5 w-5" />} />
        <MetricCard label="Retention" value={`${settings.retentionDays} days`} tone="info" icon={<ShieldCheck className="h-5 w-5" />} />
        <MetricCard label="Approval threshold" value={settings.approvalThreshold} tone="default" icon={<ShieldCheck className="h-5 w-5" />} />
        <MetricCard label="Auto-retry limit" value={settings.autoRetryLimit} tone="default" icon={<ShieldCheck className="h-5 w-5" />} />
      </section>

      <div className="grid gap-6 xl:grid-cols-2">
        <SectionCard title="Products registry" subtitle="A mockable registry of products, categories, and policy settings.">
          <div className="space-y-3">
            {settings.registry.map((item) => (
              <div key={item.id} className="flex items-center justify-between rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4 text-sm">
                <div>
                  <p className="font-medium text-[var(--bl-text-primary)]">{item.name}</p>
                  <p className="text-[var(--bl-text-secondary)]">{item.id}</p>
                </div>
                <Badge variant={item.enabled ? 'success' : 'neutral'}>{item.enabled ? 'Enabled' : 'Disabled'}</Badge>
              </div>
            ))}
          </div>
        </SectionCard>

        <SectionCard title="Notification rules" subtitle="Editable-looking policy rules for alerts and founder pings.">
          <div className="space-y-3">
            {settings.notificationRules.map((rule) => (
              <div key={rule.id} className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4 text-sm">
                <div className="flex items-center justify-between gap-2">
                  <div>
                    <p className="font-medium text-[var(--bl-text-primary)]">{rule.label}</p>
                    <p className="text-[var(--bl-text-secondary)]">Target: {rule.target}</p>
                  </div>
                  <Badge variant={rule.enabled ? 'success' : 'neutral'}>{rule.enabled ? 'On' : 'Off'}</Badge>
                </div>
              </div>
            ))}
          </div>
        </SectionCard>
      </div>

      <div className="grid gap-6 lg:grid-cols-2">
        <SectionCard title="Priority rules" subtitle="How Hermes should think about P0 to P3 work.">
          <div className="space-y-3">
            {settings.priorityRules.map((rule) => (
              <div key={rule.priority} className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">
                <p className="font-medium text-[var(--bl-text-primary)]">{rule.priority}</p>
                <p className="mt-1 text-sm text-[var(--bl-text-secondary)]">{rule.rule}</p>
              </div>
            ))}
          </div>
        </SectionCard>

        <SectionCard title="Import / export & demo data" subtitle="Mock controls for the future live configuration path.">
          <div className="space-y-3 text-sm text-[var(--bl-text-secondary)]">
            <div className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">Import JSON configuration from a future API, local file, or telemetry bootstrap.</div>
            <div className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">Export the current settings snapshot to seed another environment.</div>
            <div className="rounded-2xl border border-[var(--bl-border)] bg-[var(--bl-surface-muted)] p-4">Demo/mock toggle is enabled so the dashboard remains safe without backend persistence.</div>
          </div>
          <div className="mt-4 flex flex-wrap gap-3">
            <Button variant="secondary" onClick={exportSettings}><Download className="mr-2 h-4 w-4" />Export JSON</Button>
            <Button variant="secondary"><Upload className="mr-2 h-4 w-4" />Import JSON</Button>
          </div>
        </SectionCard>
      </div>
    </HermesShell>
  );
}
