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-3xl 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-cyan" /> General Configuration
            </h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label className="block text-sm font-bold text-gray-400 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-cyan"
                        value={uploadLimit}
                        onChange={(e) => setUploadLimit(Number(e.target.value))}
                    />
                    <p className="text-xs text-gray-500 mt-1">Maximum file size for standard users.</p>
                </div>
                <div>
                    <label className="block text-sm font-bold text-gray-400 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-cyan">
                        <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-gray-400">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-gray-600'}`}
                    >
                        <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-gray-400 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-cyan h-24 resize-none"
                        placeholder="Message to display on all pages..."
                        value={announcement}
                        onChange={(e) => setAnnouncement(e.target.value)}
                    />
                </div>
            </div>
        </Card>
    </div>
  );
};