'use client';

import { useState } from 'react';
import { Save, Users } from 'lucide-react';
import Link from 'next/link';

export default function SettingsPage() {
  const [activeTab, setActiveTab] = useState<'general' | 'payment' | 'integrations'>('general');

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-foreground">Settings</h1>
          <p className="text-muted-foreground">Manage system settings and configurations</p>
        </div>
        <button className="btn btn-primary flex items-center gap-2">
          <Save className="h-4 w-4" />
          Save Changes
        </button>
      </div>

      <div className="flex gap-2 border-b border-border">
        <button
          onClick={() => setActiveTab('general')}
          className={`px-4 py-2 font-medium ${activeTab === 'general' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          General
        </button>
        <button
          onClick={() => setActiveTab('payment')}
          className={`px-4 py-2 font-medium ${activeTab === 'payment' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          Payment
        </button>
        <button
          onClick={() => setActiveTab('integrations')}
          className={`px-4 py-2 font-medium ${activeTab === 'integrations' ? 'border-b-2 border-primary text-primary' : 'text-muted-foreground'}`}
        >
          Integrations
        </button>
      </div>

      {activeTab === 'general' && (
        <div className="card space-y-4">
          <div>
            <label className="label">Platform Name</label>
            <input type="text" className="input" defaultValue="EDR Passenger Platform" />
          </div>
          <div>
            <label className="label">Support Email</label>
            <input type="email" className="input" defaultValue="support@edr-platform.com" />
          </div>
          <div>
            <label className="label">Support Phone</label>
            <input type="tel" className="input" defaultValue="+251911234567" />
          </div>
          <div>
            <label className="label">Default Currency</label>
            <select className="input">
              <option>ETB - Ethiopian Birr</option>
              <option>DJF - Djiboutian Franc</option>
              <option>USD - US Dollar</option>
            </select>
          </div>
        </div>
      )}

      {activeTab === 'payment' && (
        <div className="space-y-6">
          <div className="card">
            <h3 className="mb-4 text-lg font-semibold text-foreground">Payment Providers</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between rounded-lg border border-border p-4">
                <div>
                  <p className="font-medium text-foreground">Telebirr</p>
                  <p className="text-sm text-muted-foreground">Mobile payment provider</p>
                </div>
                <label className="relative inline-flex cursor-pointer items-center">
                  <input type="checkbox" className="peer sr-only" defaultChecked />
                  <div className="peer h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-700 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
                </label>
              </div>
              <div className="flex items-center justify-between rounded-lg border border-border p-4">
                <div>
                  <p className="font-medium text-foreground">CBE Birr</p>
                  <p className="text-sm text-muted-foreground">Bank payment provider</p>
                </div>
                <label className="relative inline-flex cursor-pointer items-center">
                  <input type="checkbox" className="peer sr-only" defaultChecked />
                  <div className="peer h-6 w-11 rounded-full bg-gray-200 dark:bg-gray-700 after:absolute after:left-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-primary peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
                </label>
              </div>
            </div>
          </div>
        </div>
      )}

      {activeTab === 'integrations' && (
        <div className="space-y-6">
          <div className="card">
            <h3 className="mb-4 text-lg font-semibold text-foreground">Verifayda 2.0 Integration</h3>
            <div className="space-y-4">
              <div>
                <label className="label">API URL</label>
                <input type="text" className="input" defaultValue="https://api.verifayda.gov.et/v2" />
              </div>
              <div>
                <label className="label">API Key</label>
                <input type="password" className="input" defaultValue="••••••••••••" />
              </div>
              <div className="flex items-center gap-2">
                <input type="checkbox" id="verifayda-enabled" defaultChecked />
                <label htmlFor="verifayda-enabled" className="text-sm text-foreground">
                  Enable Verifayda verification
                </label>
              </div>
            </div>
          </div>

          <div className="card">
            <h3 className="mb-4 text-lg font-semibold text-foreground">Corporate IAM Integration</h3>
            <div className="space-y-4">
              <div>
                <label className="label">IAM API URL</label>
                <input type="text" className="input" defaultValue="https://iam.tria-plc.com/api" />
              </div>
              <div>
                <label className="label">API Key</label>
                <input type="password" className="input" defaultValue="••••••••••••" />
              </div>
              <div className="flex items-center gap-2">
                <input type="checkbox" id="iam-enabled" />
                <label htmlFor="iam-enabled" className="text-sm text-foreground">
                  Enable IAM authentication
                </label>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}