'use client';

import { DashboardLayout } from '@/components/layout/dashboard-layout';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { User, Bell, Shield, Key, Globe, Trash2, Save, UserPlus, Mail } from 'lucide-react';
import { demoUser } from '@/lib/demo-data';

export default function SettingsPage() {
  return (
    <DashboardLayout>
      <div className="space-y-6">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-white sm:text-3xl">Settings</h1>
          <p className="mt-1 text-sm text-zinc-500">Manage your account, notifications, and security.</p>
        </div>

        <div className="grid gap-6 lg:grid-cols-3">
          <div className="space-y-6 lg:col-span-2">
            {/* Profile */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><User className="h-4 w-4" /> Profile</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center gap-4">
                  <div className="flex h-16 w-16 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-fuchsia-500 text-lg font-bold text-white">
                    AR
                  </div>
                  <div>
                    <Button variant="outline" size="sm">Change Avatar</Button>
                    <p className="mt-1 text-xs text-zinc-400">JPG, PNG. Max 2MB</p>
                  </div>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Full Name</label>
                    <Input defaultValue={demoUser.full_name} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Email</label>
                    <Input defaultValue={demoUser.email} type="email" />
                  </div>
                </div>
                <div className="flex justify-end">
                  <Button variant="primary" size="sm"><Save className="h-4 w-4" /> Save</Button>
                </div>
              </CardContent>
            </Card>

            {/* Security */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Shield className="h-4 w-4" /> Security</CardTitle>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-zinc-700">Current Password</label>
                  <Input type="password" placeholder="••••••••" />
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">New Password</label>
                    <Input type="password" placeholder="Min. 8 characters" />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">Confirm Password</label>
                    <Input type="password" placeholder="Confirm new password" />
                  </div>
                </div>
                <div className="flex justify-end">
                  <Button variant="primary" size="sm"><Key className="h-4 w-4" /> Update Password</Button>
                </div>
              </CardContent>
            </Card>

            {/* Notifications */}
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center gap-2"><Bell className="h-4 w-4" /> Notifications</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {[
                    { label: 'New orders', description: 'Get notified when a new order is placed', enabled: true },
                    { label: 'Order status updates', description: 'Notifications when order status changes', enabled: true },
                    { label: 'Daily summary', description: 'Receive a daily summary of your sales', enabled: false },
                    { label: 'Weekly reports', description: 'Weekly analytics and performance report', enabled: true },
                    { label: 'Marketing emails', description: 'Tips, product updates, and promotions', enabled: false },
                  ].map((setting) => (
                    <div key={setting.label} className="flex items-center justify-between rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
                      <div>
                        <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{setting.label}</p>
                        <p className="text-xs text-zinc-500">{setting.description}</p>
                      </div>
                      <button className={`relative h-6 w-11 rounded-full transition-colors ${setting.enabled ? 'bg-emerald-500' : 'bg-zinc-300 dark:bg-zinc-600'}`}>
                        <span className={`absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition-transform ${setting.enabled ? 'translate-x-5' : ''}`} />
                      </button>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Sidebar */}
          <div className="space-y-6">
            {/* Team */}
            <Card>
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle className="text-base">Team Members</CardTitle>
                <Button variant="outline" size="sm"><UserPlus className="h-3.5 w-3.5" /> Invite</Button>
              </CardHeader>
              <CardContent>
                <div className="space-y-3">
                  {[
                    { name: 'Alex Rivera', email: 'alex@scanmenu.app', role: 'Owner' },
                    { name: 'Jordan Kim', email: 'jordan@scanmenu.app', role: 'Staff' },
                    { name: 'Sam Patel', email: 'sam@scanmenu.app', role: 'Staff' },
                  ].map((member) => (
                    <div key={member.email} className="flex items-center gap-3">
                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-xs font-bold text-zinc-600 dark:bg-zinc-800">
                        {member.name.split(' ').map(n => n[0]).join('')}
                      </div>
                      <div className="flex-1 min-w-0">
                        <p className="text-sm font-medium truncate">{member.name}</p>
                        <p className="text-xs text-zinc-500 truncate">{member.email}</p>
                      </div>
                      <Badge variant={member.role === 'Owner' ? 'success' : 'secondary'} className="text-[10px]">
                        {member.role}
                      </Badge>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            {/* API Keys */}
            <Card>
              <CardHeader>
                <CardTitle className="text-base flex items-center gap-2"><Key className="h-4 w-4" /> API Keys</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <div className="rounded-xl bg-zinc-50 p-3 dark:bg-zinc-800/50">
                  <p className="text-xs font-medium text-zinc-500">Live Key</p>
                  <p className="mt-1 font-mono text-xs text-zinc-700 dark:text-zinc-300">sk_live_•••••••••••4xK2</p>
                </div>
                <Button variant="outline" size="sm" className="w-full">Generate New Key</Button>
              </CardContent>
            </Card>

            {/* Danger Zone */}
            <Card className="border-red-200 dark:border-red-900/50">
              <CardHeader>
                <CardTitle className="text-base text-red-600">Danger Zone</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <p className="text-xs text-zinc-500">Permanently delete your restaurant and all associated data.</p>
                <Button variant="destructive" size="sm" className="w-full">
                  <Trash2 className="h-4 w-4" /> Delete Restaurant
                </Button>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </DashboardLayout>
  );
}