import { Card, Input, Select, Button, Tabs, TabsList, TabsTrigger, TabsContent } from '../components/ui'

export default function Settings() {
  return (
    <div className="p-6">
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-900">Settings</h1>
        <p className="text-gray-500">Manage your workspace settings</p>
      </div>

      <Tabs defaultValue="general">
        <TabsList>
          <TabsTrigger value="general">General</TabsTrigger>
          <TabsTrigger value="notifications">Notifications</TabsTrigger>
          <TabsTrigger value="security">Security</TabsTrigger>
          <TabsTrigger value="api">API</TabsTrigger>
        </TabsList>

        <TabsContent value="general">
          <Card>
            <h3 className="font-semibold text-gray-900 mb-4">Workspace Settings</h3>
            <div className="space-y-4 max-w-lg">
              <Input label="Workspace Name" defaultValue="StartData" />
              <Input label="Workspace URL" defaultValue="tickethub.startdata.com.br" disabled />
              <Select
                label="Default Timezone"
                options={[
                  { value: 'America/Sao_Paulo', label: 'America/Sao_Paulo (GMT-3)' },
                  { value: 'America/New_York', label: 'America/New_York (GMT-5)' },
                  { value: 'UTC', label: 'UTC' },
                ]}
              />
              <Select
                label="Language"
                options={[
                  { value: 'en', label: 'English' },
                  { value: 'pt-BR', label: 'Português (Brasil)' },
                ]}
              />
              <Select
                label="Date Format"
                options={[
                  { value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
                  { value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
                  { value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
                ]}
              />
              <div className="pt-4">
                <Button>Save Changes</Button>
              </div>
            </div>
          </Card>
        </TabsContent>

        <TabsContent value="notifications">
          <Card>
            <h3 className="font-semibold text-gray-900 mb-4">Email Notifications</h3>
            <div className="space-y-3 max-w-lg">
              {[
                'When a ticket is assigned to me',
                'When someone comments on my tickets',
                'When a ticket I follow is updated',
                'Daily summary of open tickets',
                'Weekly team performance report',
              ].map(item => (
                <label key={item} className="flex items-center gap-3">
                  <input type="checkbox" defaultChecked={!item.includes('Weekly')} className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                  <span className="text-gray-700">{item}</span>
                </label>
              ))}
            </div>
            
            <h3 className="font-semibold text-gray-900 mt-8 mb-4">Slack Notifications</h3>
            <div className="space-y-4 max-w-lg">
              <Input label="Slack Webhook URL" placeholder="https://hooks.slack.com/..." />
              <Select
                label="Notification Level"
                options={[
                  { value: 'all', label: 'All ticket events' },
                  { value: 'important', label: 'Important only (high/critical)' },
                  { value: 'mentions', label: 'Mentions only' },
                ]}
              />
              <div className="pt-4">
                <Button>Save Notifications</Button>
              </div>
            </div>
          </Card>
        </TabsContent>

        <TabsContent value="security">
          <Card>
            <h3 className="font-semibold text-gray-900 mb-4">Authentication</h3>
            <div className="space-y-4 max-w-lg">
              <Select
                label="SSO Provider"
                options={[
                  { value: 'none', label: 'None (Email/Password)' },
                  { value: 'google', label: 'Google Workspace' },
                  { value: 'okta', label: 'Okta' },
                  { value: 'azure', label: 'Azure AD' },
                  { value: 'saml', label: 'SAML 2.0' },
                ]}
              />
              <label className="flex items-center gap-3">
                <input type="checkbox" defaultChecked className="rounded border-gray-300 text-blue-600 focus:ring-blue-500" />
                <span className="text-gray-700">Require two-factor authentication (2FA)</span>
              </label>
              
              <h4 className="font-medium text-gray-900 mt-6">Session Settings</h4>
              <Select
                label="Session Timeout"
                options={[
                  { value: '1h', label: '1 hour' },
                  { value: '8h', label: '8 hours' },
                  { value: '24h', label: '24 hours' },
                  { value: '7d', label: '7 days' },
                ]}
              />
              
              <h4 className="font-medium text-gray-900 mt-6">IP Restrictions</h4>
              <Input label="Allowed IP Addresses" placeholder="192.168.1.0/24, 10.0.0.0/8" hint="Leave empty to allow all IPs" />
              
              <div className="pt-4">
                <Button>Save Security Settings</Button>
              </div>
            </div>
          </Card>
        </TabsContent>

        <TabsContent value="api">
          <Card>
            <h3 className="font-semibold text-gray-900 mb-4">API Keys</h3>
            <p className="text-sm text-gray-600 mb-4">
              Use API keys to authenticate with the TicketHub API.
            </p>
            
            <div className="space-y-3 mb-6">
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                <div>
                  <p className="font-mono text-sm">tk_live_••••••••••••••••</p>
                  <p className="text-xs text-gray-500 mt-1">Created Feb 18, 2026</p>
                </div>
                <div className="flex gap-2">
                  <Button variant="ghost" size="sm">Reveal</Button>
                  <Button variant="ghost" size="sm" className="text-red-600">Revoke</Button>
                </div>
              </div>
            </div>
            
            <Button variant="secondary">Generate New API Key</Button>
            
            <h3 className="font-semibold text-gray-900 mt-8 mb-4">API Documentation</h3>
            <div className="space-y-2 text-sm">
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg font-mono">
                <span className="text-blue-600">GET</span>
                <span>/api/projects</span>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg font-mono">
                <span className="text-green-600">POST</span>
                <span>/api/tickets</span>
              </div>
              <div className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg font-mono">
                <span className="text-yellow-600">PATCH</span>
                <span>/api/tickets/:id</span>
              </div>
            </div>
            
            <Button variant="ghost" className="mt-4">View Full API Documentation →</Button>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}