'use client';
import { ReactNode, useEffect, useRef, useState } from 'react';

/** Accessible label + control + error/hint grouping. */
export function Field({ label, htmlFor, error, hint, children, required }: {
  label: string; htmlFor: string; error?: string; hint?: string; children: ReactNode; required?: boolean;
}) {
  const errId = `${htmlFor}-error`;
  const hintId = `${htmlFor}-hint`;
  return (
    <div>
      <label className="label" htmlFor={htmlFor}>
        {label} {required && <span aria-hidden="true"> *</span>}
      </label>
      {children}
      {hint && <p id={hintId} className="hint mt-1">{hint}</p>}
      {error && <p id={errId} role="alert" className="text-xs mt-1 font-medium" style={{ color: 'var(--danger)' }}>{error}</p>}
    </div>
  );
}

export function Spinner({ label = 'Loading…' }: { label?: string }) {
  return (
    <span role="status" className="inline-flex items-center gap-2 text-sm" style={{ color: 'var(--muted)' }}>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" className="animate-spin">
        <circle cx="12" cy="12" r="9" stroke="currentColor" strokeOpacity="0.25" strokeWidth="3" />
        <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="3" strokeLinecap="round" />
      </svg>
      {label}
    </span>
  );
}

export function EmptyState({ title, hint }: { title: string; hint?: string }) {
  return (
    <div className="card text-center py-10">
      <p className="font-medium">{title}</p>
      {hint && <p className="hint mt-1">{hint}</p>}
    </div>
  );
}

const STATUS_COLORS: Record<string, string> = {
  Open: 'bg-slate-200', Assigned: 'bg-blue-100 text-blue-800', 'In Progress': 'bg-amber-100 text-amber-800',
  'On Hold': 'bg-purple-100 text-purple-800', Completed: 'bg-green-100 text-green-800',
  Overdue: 'bg-red-100 text-red-800', Cancelled: 'bg-gray-100 text-gray-600',
};

export const STATUSES = Object.keys(STATUS_COLORS);

export function StatusBadge({ status }: { status: string }) {
  return <span className={`badge ${STATUS_COLORS[status] ?? 'bg-slate-100'}`}>{status}</span>;
}

const icon = (size: number) => ({ width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, 'aria-hidden': true });

export function IconEdit({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <path d="M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
    </svg>
  );
}

export function IconTrash({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" />
      <path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
      <path d="M10 11v6" /><path d="M14 11v6" />
    </svg>
  );
}

export function IconSuspend({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" />
    </svg>
  );
}

export function IconActivate({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <polygon points="6 3 20 12 6 21" />
    </svg>
  );
}

export function IconToggle({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <circle cx="12" cy="12" r="9" />
      <path d="m8.5 12 2.5 2.5 5-5" />
    </svg>
  );
}

export function IconBan({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <circle cx="12" cy="12" r="9" />
      <path d="m5.6 5.6 12.8 12.8" />
    </svg>
  );
}

export function IconCheck({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <path d="m4 12.5 5 5L20 6.5" />
    </svg>
  );
}

export function IconClose({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <path d="M18 6 6 18" /><path d="m6 6 12 12" />
    </svg>
  );
}

export function IconCopy({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <rect x="9" y="9" width="12" height="12" rx="2" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  );
}

export function IconCheckCircle({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <circle cx="12" cy="12" r="9" />
      <path d="m8.5 12 2.5 2.5 5-5" />
    </svg>
  );
}

/** Copy-link button with transient confirmation (no dialog spam). */
export function CopyButton({ url, label }: { url: string; label: string }) {
  const [done, setDone] = useState(false);
  const mounted = useRef(true);
  useEffect(() => () => { mounted.current = false; }, []);
  return (
    <button
      type="button"
      className="btn-plain"
      aria-label={`Copy link: ${label}`}
      title="Copy share link"
      onClick={async () => {
        try {
          await navigator.clipboard.writeText(url);
        } catch {
          const ta = document.createElement('textarea');
          ta.value = url;
          document.body.appendChild(ta);
          ta.select();
          document.execCommand('copy');
          ta.remove();
        }
        setDone(true);
        setTimeout(() => { if (mounted.current) setDone(false); }, 1600);
      }}
    >
      {done ? <IconCheckCircle /> : <IconCopy />}
    </button>
  );
}

export function IconBell({ size = 18 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
    </svg>
  );
}

export function IconKey({ size = 16 }: { size?: number }) {
  return (
    <svg {...icon(size)}>
      <circle cx="7.5" cy="15.5" r="4.5" />
      <path d="m11 12 10-10" />
      <path d="m15 8 3 3" />
    </svg>
  );
}