'use client';

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { Save } from 'lucide-react';
import { toast } from 'sonner';
import { saveSettings } from '@/app/admin/settings/actions';
import { getSettings } from '@/lib/settings';

const groups = [
  {
    title: 'Store',
    keys: ['storeName', 'storeEmail', 'storePhone', 'whatsappNumber'],
  },
  {
    title: 'Bank Transfer',
    keys: ['bankName', 'bankAccount', 'bankInstructions'],
  },
  {
    title: 'M-Pesa (Daraja)',
    keys: [
      'mpesaConsumerKey',
      'mpesaConsumerSecret',
      'mpesaPasskey',
      'mpesaShortcode',
      'mpesaEnv',
    ],
  },
  {
    title: 'SMTP (for email notifications)',
    keys: ['smtpHost', 'smtpPort', 'smtpUser', 'smtpPass', 'smtpFrom'],
  },
];

export function SettingsClient({
  initialValues,
}: {
  initialValues: Record<string, string>;
}) {
  const router = useRouter();
  const [values, setValues] = useState(initialValues);
  const [status, setStatus] = useState<{ error?: string; success?: boolean } | null>(null);

  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
    const result = await saveSettings(formData);
    setStatus(result);
    if (result?.success) {
      toast.success('Settings saved');
      router.refresh();
    }
  }

  function handleChange(key: string, value: string) {
    setValues((prev) => ({ ...prev, [key]: value }));
  }

  return (
    <div className="space-y-6">
      <h1 className="text-2xl font-bold">Settings</h1>

      <form onSubmit={handleSubmit} className="space-y-6">
        {status?.error && (
          <p className="rounded-lg bg-destructive/10 p-3 text-sm text-destructive">
            {status.error}
          </p>
        )}
        {status?.success && (
          <p className="rounded-lg bg-green-500/10 p-3 text-sm text-green-600">
            Settings saved
          </p>
        )}

        {groups.map((group) => (
          <div key={group.title} className="rounded-xl border bg-card p-5">
            <h2 className="text-lg font-semibold">{group.title}</h2>
            <div className="mt-4 grid gap-4 md:grid-cols-2">
              {group.keys.map((key) => (
                <div key={key} className={key === 'bankInstructions' ? 'md:col-span-2' : ''}>
                  <label className="text-sm font-medium capitalize">
                    {key.replace(/([A-Z])/g, ' $1').trim()}
                  </label>
                  {key === 'bankInstructions' ? (
                    <textarea
                      name={key}
                      rows={3}
                      value={values[key] || ''}
                      onChange={(e) => handleChange(key, e.target.value)}
                      className="mt-1 w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring"
                    />
                  ) : key === 'mpesaEnv' ? (
                    <select
                      name={key}
                      value={values[key] || 'sandbox'}
                      onChange={(e) => handleChange(key, e.target.value)}
                      className="mt-1 w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring"
                    >
                      <option value="sandbox">Sandbox</option>
                      <option value="production">Production</option>
                    </select>
                  ) : (
                    <input
                      name={key}
                      type={
                        key === 'smtpPort'
                          ? 'number'
                          : key.includes('Pass') || key.includes('Secret')
                          ? 'password'
                          : 'text'
                      }
                      value={values[key] || ''}
                      onChange={(e) => handleChange(key, e.target.value)}
                      className="mt-1 w-full rounded-lg border bg-background px-3 py-2 outline-none focus:ring-2 focus:ring-ring"
                    />
                  )}
                </div>
              ))}
            </div>
          </div>
        ))}

        <button
          type="submit"
          className="inline-flex items-center gap-2 rounded-lg bg-primary px-6 py-3 font-medium text-primary-foreground transition-colors hover:bg-primary/90"
        >
          <Save className="h-4 w-4" /> Save settings
        </button>
      </form>
    </div>
  );
}