import React, { useState } from 'react';
import { Card } from '../ui/card';
import { Button } from '../ui/button';
import { Save, AlertTriangle, Server, Activity } from 'lucide-react';
import { useToast } from '../../context/ToastContext';

export const AdminSettingsView: React.FC = () => {
  const { addToast } = useToast();
  const [maintenance, setMaintenance] = useState(false);
  const [uploadLimit, setUploadLimit] = useState(500); // MB
  const [announcement, setAnnouncement] = useState('');

  const handleSave = () => {
    addToast('System settings updated', 'success');
  };

  return (
    <div className="space-y-8 animate-fadeIn max-w-4xl pb-20">
      <div className="flex justify-between items-center border-b border-kodo-steel/50 pb-6">
        <h2 className="text-2xl font-display font-bold text-white">
          SYSTEM SETTINGS
        </h2>
        <Button
          variant="primary"
          icon={<Save className="w-4 h-4" />}
          onClick={handleSave}
        >
          SAVE CHANGES
        </Button>
      </div>

      {/* General Config */}
      <Card variant="default">
        <h3 className="font-bold text-white mb-6 flex items-center gap-2">
          <Server className="w-5 h-5 text-kodo-steel" /> General Configuration
        </h3>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-sm font-bold text-kodo-content-dim mb-2">
              Upload Limit (MB)
            </label>
            <input
              type="number"
              className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel"
              value={uploadLimit}
              onChange={(e) => setUploadLimit(Number(e.target.value))}
            />
            <p className="text-xs text-kodo-content-dim mt-1">
              Maximum file size for standard users.
            </p>
          </div>
          <div>
            <label className="block text-sm font-bold text-kodo-content-dim mb-2">
              Default Storage Region
            </label>
            <select className="w-full bg-kodo-ink border border-kodo-steel rounded p-2 text-white outline-none focus:border-kodo-steel">
              <option>us-east-1 (N. Virginia)</option>
              <option>eu-west-1 (Ireland)</option>
              <option>ap-northeast-1 (Tokyo)</option>
            </select>
          </div>
        </div>
      </Card>

      {/* Feature Flags */}
      <Card variant="default">
        <h3 className="font-bold text-white mb-6 flex items-center gap-2">
          <Activity className="w-5 h-5 text-kodo-magenta" /> Feature Flags
        </h3>
        <div className="space-y-4">
          {[
            'Live Streaming',
            'Marketplace Transactions',
            'AI Mastering',
            'Public Registrations',
          ].map((feature) => (
            <div
              key={feature}
              className="flex items-center justify-between p-3 bg-kodo-ink rounded border border-kodo-steel"
            >
              <span className="font-bold text-white">{feature}</span>
              <div className="w-10 h-5 bg-kodo-lime rounded-full relative cursor-pointer">
                <div className="absolute top-0.5 right-0.5 w-4 h-4 bg-white rounded-full shadow-md"></div>
              </div>
            </div>
          ))}
        </div>
      </Card>

      {/* Maintenance */}
      <Card variant="default" className="border-kodo-red/30">
        <h3 className="font-bold text-white mb-6 flex items-center gap-2">
          <AlertTriangle className="w-5 h-5 text-kodo-red" /> Emergency &
          Maintenance
        </h3>

        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <div className="text-white font-bold">Maintenance Mode</div>
              <div className="text-xs text-kodo-content-dim">
                Disable access for non-admin users
              </div>
            </div>
            <div
              onClick={() => setMaintenance(!maintenance)}
              className={`w-12 h-6 rounded-full relative cursor-pointer transition-colors ${maintenance ? 'bg-kodo-red' : 'bg-kodo-steel'}`}
            >
              <div
                className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${maintenance ? 'left-7' : 'left-1'}`}
              ></div>
            </div>
          </div>

          <div>
            <label className="block text-sm font-bold text-kodo-content-dim mb-2">
              Global Announcement
            </label>
            <textarea
              className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white outline-none focus:border-kodo-steel h-24 resize-none"
              placeholder="Message to display on all pages..."
              value={announcement}
              onChange={(e) => setAnnouncement(e.target.value)}
            />
          </div>
        </div>
      </Card>
    </div>
  );
};