'use client';

import { CompanySettings } from '../page';

interface IntegrationSettingsProps {
  settings: CompanySettings;
  setSettings: React.Dispatch<React.SetStateAction<CompanySettings>>;
}

export default function IntegrationSettings({ settings, setSettings }: IntegrationSettingsProps) {
  return (
    <div className="p-6 space-y-6">
      <h3 className="text-lg font-semibold text-slate-800">Email Integration (SMTP)</h3>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">SMTP Host</label>
          <input
            type="text"
            value={settings.smtp.host}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, host: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">SMTP Port</label>
          <input
            type="number"
            value={settings.smtp.port}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, port: parseInt(e.target.value) } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Username</label>
          <input
            type="text"
            value={settings.smtp.user}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, user: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">Password</label>
          <input
            type="password"
            value={settings.smtp.password}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, password: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">From Email</label>
          <input
            type="email"
            value={settings.smtp.fromEmail}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromEmail: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div>
          <label className="text-sm text-slate-600">From Name</label>
          <input
            type="text"
            value={settings.smtp.fromName}
            onChange={(e) => setSettings({ ...settings, smtp: { ...settings.smtp, fromName: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>

      <div>
        <label className="text-sm text-slate-600">Encryption</label>
        <div className="flex gap-3 mt-2">
          {(['ssl', 'tls', 'none'] as const).map(enc => (
            <button
              key={enc}
              onClick={() => setSettings({ ...settings, smtp: { ...settings.smtp, encryption: enc } })}
              className={`px-4 py-2 text-sm rounded-lg border ${settings.smtp.encryption === enc
                ? 'bg-accent text-white border-accent'
                : 'border-slate-200 text-slate-600'
                }`}
            >
              {enc.toUpperCase()}
            </button>
          ))}
        </div>
      </div>

      <h3 className="text-lg font-semibold text-slate-800 pt-4 border-t">SMS Integration</h3>

      <div className="grid lg:grid-cols-2 gap-4">
        <div>
          <label className="text-sm text-slate-600">Provider</label>
          <select
            value={settings.sms.provider}
            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, provider: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          >
            <option value="BulkSMS">BulkSMS BD</option>
            <option value="Twilio">Twilio</option>
            <option value="Msg91">Msg91</option>
          </select>
        </div>
        <div>
          <label className="text-sm text-slate-600">Sender ID</label>
          <input
            type="text"
            value={settings.sms.senderId}
            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, senderId: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div className="lg:col-span-2">
          <label className="text-sm text-slate-600">API Key</label>
          <input
            type="password"
            value={settings.sms.apiKey}
            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, apiKey: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
        <div className="lg:col-span-2">
          <label className="text-sm text-slate-600">API URL</label>
          <input
            type="text"
            value={settings.sms.url}
            onChange={(e) => setSettings({ ...settings, sms: { ...settings.sms, url: e.target.value } })}
            className="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm mt-1"
          />
        </div>
      </div>
    </div>
  );
}