import React, { useState, useEffect } from 'react';
import { 
  Wrench, 
  Lock, 
  CheckCircle2, 
  AlertTriangle, 
  Clock, 
  Calendar, 
  FileText, 
  Package, 
  Send, 
  Sparkles, 
  ArrowRight,
  LogOut,
  ChevronRight,
  ShieldCheck,
  Check
} from 'lucide-react';
import { portalService, PortalProjectDetails } from '../services/portalService';

interface CustomerPortalViewProps {
  initialCode?: string;
  initialPin?: string;
}

export const CustomerPortalView: React.FC<CustomerPortalViewProps> = ({ initialCode, initialPin }) => {
  const [accessCode, setAccessCode] = useState(initialCode || '');
  const [accessPin, setAccessPin] = useState(initialPin || '');
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState<string | null>(null);

  const [projectData, setProjectData] = useState<PortalProjectDetails | null>(null);
  const [activeSubTab, setActiveSubTab] = useState<'progress' | 'booking' | 'parts' | 'docs'>('progress');

  // Booking Form State
  const [selectedDate, setSelectedDate] = useState('2026-08-11');
  const [selectedSlot, setSelectedSlot] = useState('10:00 - 11:30 Uhr');
  const [bookingNote, setBookingNote] = useState('');
  const [bookingSuccess, setBookingSuccess] = useState(false);
  const [isSubmittingBooking, setIsSubmittingBooking] = useState(false);

  useEffect(() => {
    if (initialCode && initialPin) {
      handleLogin(initialCode, initialPin);
    }
  }, [initialCode, initialPin]);

  const handleLogin = async (codeToUse?: string, pinToUse?: string) => {
    const code = codeToUse || accessCode;
    const pin = pinToUse || accessPin;

    if (!code.trim() || !pin.trim()) {
      setErrorMsg('Bitte gib den Projekt-Code und die PIN ein.');
      return;
    }

    setIsLoading(true);
    setErrorMsg(null);

    const details = await portalService.verifyPortalAccess(code, pin);
    setIsLoading(false);

    if (details) {
      setProjectData(details);
    } else {
      setErrorMsg('Ungültige Projekt-ID oder PIN. Bitte überprüfe deine Eingabe.');
    }
  };

  const handleDemoLogin = (type: 'on_track' | 'delay') => {
    const code = type === 'on_track' ? 'PRJ-8392' : 'PRJ-DELAY';
    const pin = '749201';
    setAccessCode(code);
    setAccessPin(pin);
    handleLogin(code, pin);
  };

  const handleBookAppointment = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!projectData) return;

    setIsSubmittingBooking(true);
    await portalService.bookAppointmentSlot(
      projectData.order.id,
      projectData.customer.id,
      selectedDate,
      selectedSlot,
      bookingNote
    );
    setIsSubmittingBooking(false);
    setBookingSuccess(true);

    // Refresh project details to show new changelog
    const updated = await portalService.verifyPortalAccess(projectData.order.accessCode!, projectData.order.accessPin!);
    if (updated) setProjectData(updated);

    setTimeout(() => setBookingSuccess(false), 4000);
  };

  // Render Login Screen if not logged into a project
  if (!projectData) {
    return (
      <div style={{
        minHeight: '100vh',
        backgroundColor: '#0f172a',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '24px',
        color: '#f8fafc',
        fontFamily: 'system-ui, -apple-system, sans-serif'
      }}>
        <div style={{
          width: '100%',
          maxWidth: '460px',
          backgroundColor: '#1e293b',
          borderRadius: '16px',
          border: '1px solid #334155',
          boxShadow: '0 25px 50px -12px rgba(0,0,0,0.5)',
          padding: '36px 32px'
        }}>
          {/* Header */}
          <div style={{ textAlign: 'center', marginBottom: '28px' }}>
            <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              justifyContent: 'center',
              width: '56px',
              height: '56px',
              borderRadius: '14px',
              backgroundColor: 'rgba(2, 132, 199, 0.15)',
              border: '1px solid rgba(2, 132, 199, 0.3)',
              marginBottom: '16px'
            }}>
              <Wrench size={30} color="#38bdf8" />
            </div>
            <h2 style={{ margin: 0, fontSize: '1.45rem', fontWeight: 800 }}>Kundenportal</h2>
            <p style={{ margin: '6px 0 0 0', fontSize: '0.88rem', color: '#94a3b8' }}>
              Echtzeit-Projektstatus & Terminbuchung
            </p>
          </div>

          {errorMsg && (
            <div style={{
              backgroundColor: 'rgba(239, 68, 68, 0.15)',
              border: '1px solid rgba(239, 68, 68, 0.4)',
              color: '#fca5a5',
              padding: '12px 14px',
              borderRadius: '10px',
              fontSize: '0.85rem',
              marginBottom: '20px'
            }}>
              {errorMsg}
            </div>
          )}

          <form onSubmit={(e) => { e.preventDefault(); handleLogin(); }} style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
            <div>
              <label style={{ display: 'block', fontSize: '0.83rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
                Projekt-Code / Zugangs-ID
              </label>
              <div style={{ position: 'relative' }}>
                <Lock size={18} color="#64748b" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
                <input
                  type="text"
                  placeholder="z.B. PRJ-8392"
                  value={accessCode}
                  onChange={(e) => setAccessCode(e.target.value)}
                  style={{
                    width: '100%',
                    padding: '12px 14px 12px 42px',
                    backgroundColor: '#0f172a',
                    border: '1px solid #334155',
                    borderRadius: '10px',
                    color: '#ffffff',
                    fontSize: '0.95rem',
                    boxSizing: 'border-box',
                    outline: 'none',
                    fontWeight: 600
                  }}
                />
              </div>
            </div>

            <div>
              <label style={{ display: 'block', fontSize: '0.83rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
                Sicherheits-PIN
              </label>
              <div style={{ position: 'relative' }}>
                <ShieldCheck size={18} color="#64748b" style={{ position: 'absolute', left: '14px', top: '50%', transform: 'translateY(-50%)' }} />
                <input
                  type="password"
                  placeholder="z.B. 749201"
                  value={accessPin}
                  onChange={(e) => setAccessPin(e.target.value)}
                  style={{
                    width: '100%',
                    padding: '12px 14px 12px 42px',
                    backgroundColor: '#0f172a',
                    border: '1px solid #334155',
                    borderRadius: '10px',
                    color: '#ffffff',
                    fontSize: '0.95rem',
                    boxSizing: 'border-box',
                    outline: 'none',
                    letterSpacing: '2px',
                    fontWeight: 600
                  }}
                />
              </div>
            </div>

            <button
              type="submit"
              disabled={isLoading}
              className="btn-primary-cta"
              style={{
                width: '100%',
                padding: '13px',
                fontSize: '0.95rem',
                justifyContent: 'center',
                marginTop: '6px'
              }}
            >
              <span>{isLoading ? 'Prüfe Zugangsdaten...' : 'Projekt-Status Einsehen'}</span>
              <ArrowRight size={18} />
            </button>
          </form>

          {/* Quick Demo Section */}
          <div style={{
            marginTop: '28px',
            paddingTop: '20px',
            borderTop: '1px solid #334155',
            textAlign: 'center'
          }}>
            <div style={{ fontSize: '0.78rem', color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.5px', marginBottom: '12px' }}>
              ⚡ Quick Demo-Zugänge zum Testen
            </div>
            <div style={{ display: 'flex', gap: '10px' }}>
              <button
                type="button"
                onClick={() => handleDemoLogin('on_track')}
                style={{
                  flex: 1,
                  padding: '9px 10px',
                  borderRadius: '8px',
                  backgroundColor: 'rgba(34, 197, 94, 0.12)',
                  border: '1px solid rgba(34, 197, 94, 0.3)',
                  color: '#4ade80',
                  fontSize: '0.78rem',
                  fontWeight: 600,
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '6px'
                }}
              >
                <CheckCircle2 size={14} />
                <span>🟢 Demo (On Track)</span>
              </button>

              <button
                type="button"
                onClick={() => handleDemoLogin('delay')}
                style={{
                  flex: 1,
                  padding: '9px 10px',
                  borderRadius: '8px',
                  backgroundColor: 'rgba(245, 158, 11, 0.12)',
                  border: '1px solid rgba(245, 158, 11, 0.3)',
                  color: '#fbbf24',
                  fontSize: '0.78rem',
                  fontWeight: 600,
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: '6px'
                }}
              >
                <AlertTriangle size={14} />
                <span>🟠 Demo (Verzögerung)</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // Active Project Dashboard View
  const { order, customer, changelogs, attachments, installedParts } = projectData;

  const isDelay = order.healthStatus === 'delay' || order.healthStatus === 'critical';

  return (
    <div style={{
      minHeight: '100vh',
      backgroundColor: 'var(--bg-app, #0f172a)',
      color: 'var(--text-primary, #f8fafc)',
      padding: '24px 16px',
      boxSizing: 'border-box'
    }}>
      <div style={{ maxWidth: '960px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '20px' }}>
        
        {/* Top Navbar */}
        <div style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          padding: '14px 20px',
          backgroundColor: 'var(--bg-card, #1e293b)',
          borderRadius: '14px',
          border: '1px solid var(--border-color, #334155)'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
            <div style={{
              width: '38px',
              height: '38px',
              borderRadius: '10px',
              backgroundColor: '#0284c7',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              color: '#ffffff'
            }}>
              <Wrench size={20} />
            </div>
            <div>
              <div style={{ fontSize: '1rem', fontWeight: 800 }}>Handwerksfreund Kundenportal</div>
              <div style={{ fontSize: '0.78rem', color: 'var(--text-muted, #94a3b8)' }}>
                Projekt-Code: <strong style={{ color: '#38bdf8' }}>{order.accessCode}</strong>
              </div>
            </div>
          </div>

          <button
            onClick={() => setProjectData(null)}
            style={{
              padding: '8px 14px',
              borderRadius: '8px',
              backgroundColor: 'rgba(239, 68, 68, 0.1)',
              border: '1px solid rgba(239, 68, 68, 0.3)',
              color: '#fca5a5',
              fontSize: '0.82rem',
              fontWeight: 600,
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '6px'
            }}
          >
            <LogOut size={16} />
            <span>Abmelden</span>
          </button>
        </div>

        {/* Health Status Banner */}
        <div style={{
          padding: '24px',
          borderRadius: '16px',
          background: isDelay 
            ? 'linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.1) 100%)' 
            : 'linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(16, 185, 129, 0.1) 100%)',
          border: isDelay 
            ? '1.5px solid rgba(245, 158, 11, 0.5)' 
            : '1.5px solid rgba(34, 197, 94, 0.5)',
          display: 'flex',
          flexDirection: 'column',
          gap: '16px'
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: '12px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
              <div style={{
                width: '46px',
                height: '46px',
                borderRadius: '12px',
                backgroundColor: isDelay ? '#f59e0b' : '#22c55e',
                color: '#ffffff',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                boxShadow: isDelay ? '0 0 15px rgba(245, 158, 11, 0.4)' : '0 0 15px rgba(34, 197, 94, 0.4)'
              }}>
                {isDelay ? <AlertTriangle size={26} /> : <CheckCircle2 size={26} />}
              </div>
              <div>
                <div style={{
                  fontSize: '0.78rem',
                  fontWeight: 700,
                  textTransform: 'uppercase',
                  letterSpacing: '1px',
                  color: isDelay ? '#fbbf24' : '#4ade80'
                }}>
                  PROJEKT-STATUS STATUS-CHECK
                </div>
                <h2 style={{ margin: 0, fontSize: '1.35rem', fontWeight: 800, color: 'var(--text-primary, #ffffff)' }}>
                  {isDelay ? 'Verzögerung im Ablauf (Delay)' : '🟢 Projekt ist voll im Zeitplan (On Track)'}
                </h2>
              </div>
            </div>

            <div style={{
              backgroundColor: 'rgba(15, 23, 42, 0.6)',
              padding: '8px 16px',
              borderRadius: '10px',
              border: '1px solid rgba(255,255,255,0.1)',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              fontSize: '0.85rem'
            }}>
              <Calendar size={16} color="#38bdf8" />
              <span>Voraussichtliche Fertigstellung: <strong style={{ color: '#38bdf8' }}>{order.expectedCompletionDate || '12.08.2026'}</strong></span>
            </div>
          </div>

          {/* Delay Explanation Notice */}
          {isDelay && order.delayReason && (
            <div style={{
              backgroundColor: 'rgba(15, 23, 42, 0.7)',
              padding: '14px 16px',
              borderRadius: '10px',
              fontSize: '0.9rem',
              color: '#fef08a',
              lineHeight: '1.5',
              borderLeft: '4px solid #f59e0b'
            }}>
              <strong>Transparenz-Hinweis von deinem Handwerker:</strong> {order.delayReason}
            </div>
          )}

          {/* Visual Progress Bar */}
          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.88rem', fontWeight: 700, marginBottom: '8px' }}>
              <span>Gesamter Baufortschritt</span>
              <span style={{ color: '#38bdf8' }}>{order.progressPercent || 75}% Abgeschlossen</span>
            </div>

            <div style={{
              width: '100%',
              height: '14px',
              backgroundColor: 'rgba(15, 23, 42, 0.6)',
              borderRadius: '20px',
              overflow: 'hidden',
              padding: '2px',
              boxSizing: 'border-box',
              border: '1px solid rgba(255,255,255,0.1)'
            }}>
              <div style={{
                width: `${order.progressPercent || 75}%`,
                height: '100%',
                borderRadius: '20px',
                background: isDelay 
                  ? 'linear-gradient(90deg, #f59e0b 0%, #d97706 100%)' 
                  : 'linear-gradient(90deg, #0284c7 0%, #38bdf8 100%)',
                transition: 'width 0.8s ease'
              }} />
            </div>
          </div>
        </div>

        {/* Navigation Tabs */}
        <div style={{ display: 'flex', gap: '8px', borderBottom: '1px solid var(--border-color, #334155)', paddingBottom: '4px' }}>
          <button
            onClick={() => setActiveSubTab('progress')}
            style={{
              padding: '10px 18px',
              borderRadius: '10px',
              fontSize: '0.88rem',
              fontWeight: 700,
              border: 'none',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              backgroundColor: activeSubTab === 'progress' ? '#0284c7' : 'transparent',
              color: activeSubTab === 'progress' ? '#ffffff' : 'var(--text-muted, #94a3b8)'
            }}
          >
            <Clock size={18} />
            <span>Bau-Verlauf & Updates</span>
          </button>

          <button
            onClick={() => setActiveSubTab('booking')}
            style={{
              padding: '10px 18px',
              borderRadius: '10px',
              fontSize: '0.88rem',
              fontWeight: 700,
              border: 'none',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              backgroundColor: activeSubTab === 'booking' ? '#ea580c' : 'transparent',
              color: '#ffffff'
            }}
          >
            <Calendar size={18} />
            <span>Online-Termin buchen</span>
          </button>

          <button
            onClick={() => setActiveSubTab('parts')}
            style={{
              padding: '10px 18px',
              borderRadius: '10px',
              fontSize: '0.88rem',
              fontWeight: 700,
              border: 'none',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              backgroundColor: activeSubTab === 'parts' ? '#0284c7' : 'transparent',
              color: activeSubTab === 'parts' ? '#ffffff' : 'var(--text-muted, #94a3b8)'
            }}
          >
            <Package size={18} />
            <span>Geräte ({installedParts.length})</span>
          </button>

          <button
            onClick={() => setActiveSubTab('docs')}
            style={{
              padding: '10px 18px',
              borderRadius: '10px',
              fontSize: '0.88rem',
              fontWeight: 700,
              border: 'none',
              cursor: 'pointer',
              display: 'flex',
              alignItems: 'center',
              gap: '8px',
              backgroundColor: activeSubTab === 'docs' ? '#0284c7' : 'transparent',
              color: activeSubTab === 'docs' ? '#ffffff' : 'var(--text-muted, #94a3b8)'
            }}
          >
            <FileText size={18} />
            <span>Dokumente ({attachments.length})</span>
          </button>
        </div>

        {/* TAB 1: Bau-Verlauf & Updates */}
        {activeSubTab === 'progress' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
            <h3 style={{ margin: '0 0 4px 0', fontSize: '1.1rem', fontWeight: 700 }}>Projekt-Changelog & Handwerker-Updates</h3>
            
            {changelogs.length === 0 ? (
              <div style={{ padding: '24px', textAlign: 'center', color: '#94a3b8', backgroundColor: 'var(--bg-card, #1e293b)', borderRadius: '12px' }}>
                Noch keine Einträge vorhanden.
              </div>
            ) : (
              changelogs.map((item) => (
                <div key={item.id} style={{
                  backgroundColor: 'var(--bg-card, #1e293b)',
                  border: '1px solid var(--border-color, #334155)',
                  borderRadius: '12px',
                  padding: '16px 20px',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: '8px'
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: '0.85rem', fontWeight: 700, color: '#38bdf8' }}>
                      {item.authorName}
                    </span>
                    <span style={{ fontSize: '0.78rem', color: 'var(--text-muted, #94a3b8)' }}>
                      {new Date(item.createdAt).toLocaleString('de-DE')}
                    </span>
                  </div>
                  <p style={{ margin: 0, fontSize: '0.92rem', lineHeight: '1.5' }}>{item.note}</p>
                </div>
              ))
            )}
          </div>
        )}

        {/* TAB 2: Online-Terminbuchung */}
        {activeSubTab === 'booking' && (
          <div style={{
            backgroundColor: 'var(--bg-card, #1e293b)',
            border: '1px solid var(--border-color, #334155)',
            borderRadius: '16px',
            padding: '24px'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
              <div style={{
                width: '40px',
                height: '40px',
                borderRadius: '10px',
                backgroundColor: 'rgba(234, 88, 12, 0.15)',
                border: '1px solid rgba(234, 88, 12, 0.3)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                color: '#ea580c'
              }}>
                <Calendar size={22} />
              </div>
              <div>
                <h3 style={{ margin: 0, fontSize: '1.15rem', fontWeight: 800 }}>Termin online vereinbaren</h3>
                <p style={{ margin: 0, fontSize: '0.82rem', color: 'var(--text-muted, #94a3b8)' }}>Wähle ein freies Zeitfenster für deine Wartung oder Abnahme</p>
              </div>
            </div>

            {bookingSuccess && (
              <div style={{
                backgroundColor: 'rgba(34, 197, 94, 0.15)',
                border: '1px solid rgba(34, 197, 94, 0.4)',
                color: '#4ade80',
                padding: '14px',
                borderRadius: '10px',
                fontSize: '0.9rem',
                fontWeight: 600,
                display: 'flex',
                alignItems: 'center',
                gap: '10px',
                marginBottom: '20px'
              }}>
                <Check size={20} />
                <span>Vielen Dank! Dein Termin wurde erfolgreich gebucht. Unser Team hat die Benachrichtigung erhalten.</span>
              </div>
            )}

            <form onSubmit={handleBookAppointment} style={{ display: 'flex', flexDirection: 'column', gap: '18px' }}>
              <div>
                <label style={{ display: 'block', fontSize: '0.83rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
                  Wunschdatum
                </label>
                <input
                  type="date"
                  value={selectedDate}
                  onChange={(e) => setSelectedDate(e.target.value)}
                  style={{
                    width: '100%',
                    padding: '10px 14px',
                    backgroundColor: '#0f172a',
                    border: '1px solid #334155',
                    borderRadius: '8px',
                    color: '#ffffff',
                    fontSize: '0.9rem',
                    boxSizing: 'border-box'
                  }}
                />
              </div>

              <div>
                <label style={{ display: 'block', fontSize: '0.83rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
                  Verfügbares Zeitfenster wählen
                </label>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '10px' }}>
                  {['08:30 - 10:00 Uhr', '10:00 - 11:30 Uhr', '13:00 - 14:30 Uhr', '15:00 - 16:30 Uhr'].map((slot) => (
                    <button
                      key={slot}
                      type="button"
                      onClick={() => setSelectedSlot(slot)}
                      style={{
                        padding: '12px',
                        borderRadius: '10px',
                        border: selectedSlot === slot ? '2px solid #ea580c' : '1px solid #334155',
                        backgroundColor: selectedSlot === slot ? 'rgba(234, 88, 12, 0.15)' : '#0f172a',
                        color: selectedSlot === slot ? '#ffffff' : '#94a3b8',
                        fontWeight: selectedSlot === slot ? 700 : 500,
                        cursor: 'pointer',
                        textAlign: 'center'
                      }}
                    >
                      {slot}
                    </button>
                  ))}
                </div>
              </div>

              <div>
                <label style={{ display: 'block', fontSize: '0.83rem', fontWeight: 600, color: '#cbd5e1', marginBottom: '6px' }}>
                  Anmerkung / Notiz (optional)
                </label>
                <textarea
                  rows={3}
                  placeholder="z.B. Schlüssel liegt unter der Fußmatte..."
                  value={bookingNote}
                  onChange={(e) => setBookingNote(e.target.value)}
                  style={{
                    width: '100%',
                    padding: '10px 14px',
                    backgroundColor: '#0f172a',
                    border: '1px solid #334155',
                    borderRadius: '8px',
                    color: '#ffffff',
                    fontSize: '0.9rem',
                    boxSizing: 'border-box'
                  }}
                />
              </div>

              <button
                type="submit"
                disabled={isSubmittingBooking}
                className="btn-primary-cta"
                style={{ padding: '12px 20px', alignSelf: 'flex-start' }}
              >
                <Send size={18} />
                <span>{isSubmittingBooking ? 'Bucht Termin...' : 'Termin Verbindlich Buchen'}</span>
              </button>
            </form>
          </div>
        )}

        {/* TAB 3: Verbaute Geräte */}
        {activeSubTab === 'parts' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <h3 style={{ margin: '0 0 4px 0', fontSize: '1.1rem', fontWeight: 700 }}>Installierte Geräte & Komponenten</h3>
            {installedParts.map((part) => (
              <div key={part.id} style={{
                backgroundColor: 'var(--bg-card, #1e293b)',
                border: '1px solid var(--border-color, #334155)',
                borderRadius: '12px',
                padding: '16px 20px',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between'
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                  <Package size={24} color="#38bdf8" />
                  <div>
                    <div style={{ fontSize: '0.95rem', fontWeight: 700 }}>{part.name}</div>
                    <div style={{ fontSize: '0.8rem', color: 'var(--text-muted, #94a3b8)' }}>
                      Hersteller: {part.manufacturer} | Kategorie: {part.category}
                    </div>
                  </div>
                </div>

                <div style={{
                  backgroundColor: '#0f172a',
                  padding: '4px 10px',
                  borderRadius: '8px',
                  fontSize: '0.78rem',
                  fontFamily: 'monospace',
                  color: '#94a3b8',
                  border: '1px solid #334155'
                }}>
                  SN: {part.serialNumber || 'Keine SN'}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* TAB 4: Dokumente */}
        {activeSubTab === 'docs' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
            <h3 style={{ margin: '0 0 4px 0', fontSize: '1.1rem', fontWeight: 700 }}>Dokumente & Vor-Ort-Fotos</h3>
            {attachments.length === 0 ? (
              <div style={{ padding: '24px', textAlign: 'center', color: '#94a3b8', backgroundColor: 'var(--bg-card, #1e293b)', borderRadius: '12px' }}>
                Noch keine Dokumente freigegeben.
              </div>
            ) : (
              attachments.map((doc) => (
                <div key={doc.id} style={{
                  backgroundColor: 'var(--bg-card, #1e293b)',
                  border: '1px solid var(--border-color, #334155)',
                  borderRadius: '12px',
                  padding: '16px 20px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between'
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                    <FileText size={24} color="#ea580c" />
                    <div>
                      <div style={{ fontSize: '0.95rem', fontWeight: 700 }}>{doc.title}</div>
                      <div style={{ fontSize: '0.78rem', color: 'var(--text-muted, #94a3b8)' }}>
                        Kategorie: {doc.category}
                      </div>
                    </div>
                  </div>

                  <a
                    href={doc.filePath}
                    target="_blank"
                    rel="noreferrer"
                    style={{
                      padding: '6px 14px',
                      borderRadius: '8px',
                      backgroundColor: '#0284c7',
                      color: '#ffffff',
                      textDecoration: 'none',
                      fontSize: '0.8rem',
                      fontWeight: 600
                    }}
                  >
                    Ansehen
                  </a>
                </div>
              ))
            )}
          </div>
        )}

      </div>
    </div>
  );
};