import { For, Show, type JSX } from 'solid-js';

type Metric = {
  label: string;
  value: string;
  tone?: 'default' | 'positive' | 'warning' | 'critical';
};

export function PageHeader(props: { title: string; subtitle: string; actions?: JSX.Element }) {
  return (
    <div class="flex flex-col gap-4 rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] p-6 lg:flex-row lg:items-center lg:justify-between">
      <div>
        <h1 class="text-[34px] font-semibold leading-[1.15] text-[#0D0D2A]">{props.title}</h1>
        <p class="mt-1 text-sm text-[#7b8099]">{props.subtitle}</p>
      </div>
      <Show when={props.actions}>
        <div class="flex items-center gap-2">{props.actions}</div>
      </Show>
    </div>
  );
}

export function MetricCards(props: { items: Metric[] }) {
  return (
    <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
      <For each={props.items}>
        {(item) => (
          <div class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8] px-5 py-4">
            <p class="text-xs font-semibold uppercase tracking-[0.08em] text-[#7c839d]">{item.label}</p>
            <p
              class={`mt-2 text-3xl font-semibold ${
                item.tone === 'positive'
                  ? 'text-[#1d8f57]'
                  : item.tone === 'warning'
                    ? 'text-[#b1720c]'
                    : item.tone === 'critical'
                      ? 'text-[#b51f40]'
                      : 'text-[#0D0D2A]'
              }`}
            >
              {item.value}
            </p>
          </div>
        )}
      </For>
    </div>
  );
}

export function SectionCard(props: { title: string; subtitle?: string; actions?: JSX.Element; children: JSX.Element }) {
  return (
    <section class="rounded-3xl border border-[#d9dde6] bg-[#f7f7f8]">
      <div class="flex flex-col gap-3 border-b border-[#e5e8ef] px-5 py-4 lg:flex-row lg:items-center lg:justify-between">
        <div>
          <h2 class="text-[30px] font-semibold leading-[1.1] text-[#0D0D2A]">{props.title}</h2>
          <Show when={props.subtitle}>
            <p class="mt-1 text-sm text-[#7f86a0]">{props.subtitle}</p>
          </Show>
        </div>
        <Show when={props.actions}>
          <div class="flex items-center gap-2">{props.actions}</div>
        </Show>
      </div>
      <div class="p-4">{props.children}</div>
    </section>
  );
}

export function Tabs<T extends string>(props: { value: T; onChange: (key: T) => void; items: { key: T; label: string }[] }) {
  return (
    <div class="inline-flex rounded-xl border border-[#e0e5f0] bg-[#f0f2f8] p-1">
      <For each={props.items}>
        {(item) => (
          <button
            onClick={() => props.onChange(item.key)}
            class={`rounded-lg px-3 py-1.5 text-sm font-medium transition ${
              props.value === item.key ? 'bg-[#FF5E13] text-white shadow-sm' : 'text-slate-600 hover:text-[#0D0D2A]'
            }`}
          >
            {item.label}
          </button>
        )}
      </For>
    </div>
  );
}

export function SearchFilters(props: {
  query: string;
  onQuery: (v: string) => void;
  left?: JSX.Element;
  right?: JSX.Element;
  placeholder?: string;
}) {
  return (
    <div class="grid gap-3 rounded-2xl border border-[#e1e4ec] bg-[#f5f6f9] p-3 lg:grid-cols-[1fr_auto_auto] lg:items-center">
      <label class="flex items-center rounded-xl border border-[#dde3ef] bg-[#eceef3] px-3 py-2 text-sm text-[#8a90aa]">
        <span class="mr-2">SR</span>
        <input
          value={props.query}
          onInput={(e) => props.onQuery(e.currentTarget.value)}
          placeholder={props.placeholder ?? 'Search by name or ID...'}
          class="w-full border-0 bg-transparent text-sm text-[#0D0D2A] outline-none"
        />
      </label>
      <Show when={props.left}>
        <div class="flex gap-2">{props.left}</div>
      </Show>
      <Show when={props.right}>
        <div class="flex gap-2 lg:justify-end">{props.right}</div>
      </Show>
    </div>
  );
}

export function StatusBadge(props: { label: string; tone?: 'neutral' | 'positive' | 'warning' | 'critical' | 'info' }) {
  const tone = () => props.tone ?? 'neutral';
  return (
    <span
      class={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${
        tone() === 'positive'
          ? 'bg-[#e7f7ee] text-[#187f4f]'
          : tone() === 'warning'
            ? 'bg-[#fff5df] text-[#9a6709]'
            : tone() === 'critical'
              ? 'bg-[#ffe5ea] text-[#b51f40]'
              : tone() === 'info'
                ? 'bg-[#eaf0ff] text-[#2f4da5]'
                : 'bg-[#eceff5] text-[#4a4f65]'
      }`}
    >
      {props.label}
    </span>
  );
}

export function ActionButton(props: { onClick?: () => void; children: JSX.Element; tone?: 'primary' | 'secondary' | 'ghost'; type?: 'button' | 'submit' | 'reset' }) {
  const tone = () => props.tone ?? 'secondary';
  return (
    <button
      type={props.type ?? 'button'}
      onClick={props.onClick}
      class={`rounded-lg px-3 py-2 text-sm font-medium transition ${
        tone() === 'primary'
          ? 'bg-[#0D0D2A] text-white hover:bg-[#1a1a3e]'
          : tone() === 'ghost'
            ? 'text-[#5f6681] hover:bg-[#eef1f7]'
            : 'border border-[#d7deea] bg-[#f7f7f8] text-[#0D0D2A] hover:border-[#bfc8da]'
      }`}
    >
      {props.children}
    </button>
  );
}

export function DataTable(props: { headers: string[]; rows: JSX.Element[][] }) {
  return (
    <div class="overflow-x-auto rounded-2xl border border-[#d9dde6] bg-[#f7f7f8]">
      <table class="min-w-full text-left text-sm">
        <thead class="bg-[#eff1f6] text-[#4c536d]">
          <tr>
            <For each={props.headers}>{(head) => <th class="px-4 py-3 text-xs font-semibold uppercase tracking-[0.06em]">{head}</th>}</For>
          </tr>
        </thead>
        <tbody class="divide-y divide-[#e2e6ee] bg-[#f7f7f8]">
          <For each={props.rows}>
            {(row) => (
              <tr>
                <For each={row}>{(cell) => <td class="px-4 py-3 align-middle">{cell}</td>}</For>
              </tr>
            )}
          </For>
        </tbody>
      </table>
    </div>
  );
}

export function ModuleStatusPill(props: { status: 'live' | 'mock' | 'pending' }) {
  return (
    <StatusBadge
      label={props.status.toUpperCase()}
      tone={props.status === 'live' ? 'positive' : props.status === 'mock' ? 'warning' : 'neutral'}
    />
  );
}
