import { createClient } from '@/lib/supabase/server';
import { redirect } from 'next/navigation';
import Link from 'next/link';
import { ArrowLeft, User as UserIcon, Building2, ShieldAlert } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { AccountSettingsForm } from './AccountSettingsForm';

export default async function AccountKundenPage() {
  const supabase = await createClient();
  const { data: { user } } = await supabase.auth.getUser();

  if (!user) {
    redirect('/auth/login?next=/account-kunden');
  }

  // 1. Hole User aus custom users Tabelle
  const { data: dbUser } = await supabase
    .from('users')
    .select('role, company_id')
    .eq('id', user.id)
    .single();

  // 2. Hole Profil-Daten
  const { data: profile } = await supabase
    .from('profiles')
    .select('*')
    .eq('id', user.id)
    .single();

  // 3. Hole Company-Daten falls vorhanden
  let company = null;
  if (dbUser?.company_id) {
    const { data: companyData } = await supabase
      .from('companies')
      .select('*')
      .eq('id', dbUser.company_id)
      .single();
    company = companyData;
  }

  return (
    <div className="min-h-screen bg-[#020617] text-white px-4 py-12">
      <div className="max-w-4xl mx-auto space-y-8">
        
        {/* Header */}
        <div className="flex items-center gap-4">
          <Link href="/">
            <Button variant="ghost" size="sm" className="text-slate-400 hover:text-white">
              <ArrowLeft className="w-4 h-4 mr-2" /> Startseite
            </Button>
          </Link>
          <div>
            <h1 className="text-3xl font-extrabold tracking-tight flex items-center gap-3">
              <UserIcon className="w-8 h-8 text-primary" />
              Account Einstellungen
            </h1>
            <p className="text-slate-400 text-sm mt-1">
              Verwalten Sie Ihre persönlichen Profildaten, Unternehmensdaten und Sicherheitseinstellungen.
            </p>
          </div>
        </div>

        {/* Dashboard Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          
          {/* Linke Infospalte */}
          <div className="space-y-6">
            <Card className="glass-dark border-white/10">
              <CardHeader>
                <CardTitle className="text-lg flex items-center gap-2">
                  <UserIcon className="w-5 h-5 text-primary" />
                  Benutzer-Info
                </CardTitle>
                <CardDescription className="text-slate-400 text-xs">
                  Ihr aktueller Systemstatus
                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-4 text-sm">
                <div>
                  <span className="text-slate-500 block text-xs uppercase tracking-wider">E-Mail-Adresse</span>
                  <span className="text-white font-medium">{user.email}</span>
                </div>
                <div>
                  <span className="text-slate-500 block text-xs uppercase tracking-wider">Rolle</span>
                  <span className="text-amber-400 font-bold uppercase text-xs tracking-wider bg-amber-500/10 px-2 py-0.5 rounded border border-amber-500/20">
                    {dbUser?.role || 'partner'}
                  </span>
                </div>
                {company && (
                  <div>
                    <span className="text-slate-500 block text-xs uppercase tracking-wider">Unternehmen</span>
                    <span className="text-white font-medium flex items-center gap-1.5 mt-1">
                      <Building2 className="w-4 h-4 text-slate-400" />
                      {company.name}
                    </span>
                  </div>
                )}
              </CardContent>
            </Card>

            {!dbUser?.company_id && (
              <Card className="border-red-500/20 bg-red-500/5">
                <CardContent className="p-4 flex gap-3 text-red-400 text-sm">
                  <ShieldAlert className="w-5 h-5 shrink-0 mt-0.5" />
                  <div>
                    <p className="font-bold">Kein Unternehmen zugewiesen</p>
                    <p className="text-xs text-red-400/80 mt-1">
                      Wenden Sie sich an einen Administrator, um Ihrem Account ein Partner-Unternehmen zuzuweisen.
                    </p>
                  </div>
                </CardContent>
              </Card>
            )}
          </div>

          {/* Rechte Formularspalte */}
          <div className="md:col-span-2">
            <AccountSettingsForm
              userId={user.id}
              profile={profile}
              company={company}
            />
          </div>

        </div>

      </div>
    </div>
  );
}