'use client';

import Link from 'next/link';
import type { ReactNode } from 'react';
import { ArrowLeft, AlertCircle } from 'lucide-react';
import { GradientBackground } from '@sehat/ui';

export interface EmrSectionShellProps {
  title: string;
  subtitle: string;
  error?: string | null;
  children: ReactNode;
}

export function EmrSectionShell({ title, subtitle, error, children }: EmrSectionShellProps) {
  return (
    <GradientBackground variant="soft">
      <main className="mx-auto min-h-screen max-w-2xl px-6 py-8">
        <Link
          href="/emr"
          className="inline-flex items-center gap-2 text-sm font-semibold text-brand hover:text-brand-dark"
        >
          <ArrowLeft className="h-4 w-4" /> Back to EMR overview
        </Link>

        <header className="mt-6">
          <h1 className="text-3xl font-bold text-ink">{title}</h1>
          <p className="mt-2 text-sm text-ink-muted">{subtitle}</p>
        </header>

        {error ? (
          <div className="mt-6 flex items-start gap-2 rounded-lg border border-error/40 bg-error/10 p-3 text-sm text-error">
            <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
            <span>{error}</span>
          </div>
        ) : null}

        <div className="mt-8 space-y-6">{children}</div>
      </main>
    </GradientBackground>
  );
}

export interface SelectFieldProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  options: Array<{ value: string; label: string }>;
  placeholder?: string;
  required?: boolean;
}

export function SelectField({
  label,
  value,
  onChange,
  options,
  placeholder,
  required,
}: SelectFieldProps) {
  return (
    <div className="space-y-1.5">
      <label className="text-sm font-medium text-ink-muted">
        {label}
        {required ? <span className="ml-0.5 text-error">*</span> : null}
      </label>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        required={required}
        className="h-12 w-full rounded-lg border border-surface-border bg-white px-4 text-sm text-ink focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
      >
        <option value="">{placeholder ?? 'Select'}</option>
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export interface TextAreaFieldProps {
  label: string;
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
  rows?: number;
}

export function TextAreaField({
  label,
  value,
  onChange,
  placeholder,
  rows = 3,
}: TextAreaFieldProps) {
  return (
    <div className="space-y-1.5">
      <label className="text-sm font-medium text-ink-muted">{label}</label>
      <textarea
        rows={rows}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="w-full rounded-lg border border-surface-border bg-white px-4 py-3 text-sm text-ink focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/30"
      />
    </div>
  );
}