import { useState } from "react";
import { motion } from "framer-motion";
import { Building2, Globe, Briefcase, Save } from "lucide-react";
import { CURRENT_TENANT } from "@/data/mockData";

export default function SettingsPage() {
  const [settings, setSettings] = useState({
    name: CURRENT_TENANT.name,
    domain: CURRENT_TENANT.domain,
    industry: CURRENT_TENANT.industry,
    status: CURRENT_TENANT.status,
  });
  const [saved, setSaved] = useState(false);

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2500);
  };

  return (
    <div className="space-y-8 max-w-2xl">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Settings</h1>
        <p className="text-sm text-muted-foreground mt-1">Manage your company settings and configuration</p>
      </div>

      {saved && (
        <div className="px-4 py-3 bg-emerald-50 border border-emerald-200 rounded-lg text-emerald-700 text-sm font-medium">
          Settings saved successfully.
        </div>
      )}

      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }}
        className="bg-card border border-card-border rounded-xl shadow-sm overflow-hidden"
      >
        <div className="px-6 py-5 border-b border-border">
          <h2 className="text-sm font-semibold text-foreground flex items-center gap-2">
            <Building2 className="w-4 h-4 text-muted-foreground" />
            Company Information
          </h2>
        </div>
        <div className="p-6 space-y-5">
          <div>
            <label className="text-sm font-medium text-foreground mb-1.5 block">Company Name</label>
            <input
              value={settings.name}
              onChange={e => setSettings(p => ({ ...p, name: e.target.value }))}
              className="w-full px-3.5 py-2.5 border border-border rounded-lg text-sm bg-card focus:outline-none focus:ring-2 focus:ring-primary/30 transition"
            />
          </div>
          <div>
            <label className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-2">
              <Globe className="w-3.5 h-3.5 text-muted-foreground" /> Domain
            </label>
            <input
              value={settings.domain}
              onChange={e => setSettings(p => ({ ...p, domain: e.target.value }))}
              className="w-full px-3.5 py-2.5 border border-border rounded-lg text-sm bg-card focus:outline-none focus:ring-2 focus:ring-primary/30 transition"
            />
          </div>
          <div>
            <label className="text-sm font-medium text-foreground mb-1.5 flex items-center gap-2">
              <Briefcase className="w-3.5 h-3.5 text-muted-foreground" /> Industry
            </label>
            <select
              value={settings.industry}
              onChange={e => setSettings(p => ({ ...p, industry: e.target.value }))}
              className="w-full px-3.5 py-2.5 border border-border rounded-lg text-sm bg-card focus:outline-none focus:ring-2 focus:ring-primary/30"
            >
              <option>Technology</option>
              <option>Manufacturing</option>
              <option>Healthcare</option>
              <option>Finance</option>
              <option>Education</option>
              <option>Retail</option>
              <option>Other</option>
            </select>
          </div>
          <div>
            <label className="text-sm font-medium text-foreground mb-1.5 block">Status</label>
            <select
              value={settings.status}
              onChange={e => setSettings(p => ({ ...p, status: e.target.value }))}
              className="w-full px-3.5 py-2.5 border border-border rounded-lg text-sm bg-card focus:outline-none focus:ring-2 focus:ring-primary/30"
            >
              <option value="active">Active</option>
              <option value="suspended">Suspended</option>
            </select>
          </div>
          <div className="pt-2">
            <button
              onClick={handleSave}
              className="flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-lg text-sm font-medium hover:bg-primary/90 transition"
              data-testid="button-save-settings"
            >
              <Save className="w-4 h-4" /> Save Changes
            </button>
          </div>
        </div>
      </motion.div>

      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}
        className="bg-card border border-card-border rounded-xl shadow-sm overflow-hidden"
      >
        <div className="px-6 py-5 border-b border-border">
          <h2 className="text-sm font-semibold text-foreground">Danger Zone</h2>
        </div>
        <div className="p-6">
          <div className="flex items-start justify-between p-4 border border-rose-200 rounded-lg bg-rose-50/50">
            <div>
              <p className="text-sm font-medium text-foreground">Delete Company</p>
              <p className="text-xs text-muted-foreground mt-0.5">Permanently delete this company and all associated data. This action cannot be undone.</p>
            </div>
            <button className="flex-shrink-0 ml-4 px-3.5 py-2 border border-rose-300 text-rose-600 text-sm font-medium rounded-lg hover:bg-rose-100 transition">
              Delete
            </button>
          </div>
        </div>
      </motion.div>
    </div>
  );
}
