import { useState, useEffect } from 'react';
import { listen } from "@tauri-apps/api/event";
import { Settings as SettingsIcon } from "lucide-react";
import Settings from "./components/Settings";
import Recorder from "./components/Recorder";
import LogViewer, { LogEntry } from "./components/LogViewer";
import TranscriptionView from "./components/TranscriptionView";
import Tabs from "./components/Tabs";

export interface PromptTemplate {
  id: string;
  name: string;
  content: string;
}

function App() {
  const [view, setView] = useState<'recorder' | 'logs' | 'settings' | 'transcription'>('recorder');
  // Keep track of the *previous* tab to return to from settings
  const [lastTab, setLastTab] = useState<'recorder' | 'logs' | 'transcription'>('recorder');

  const [apiKey, setApiKey] = useState(localStorage.getItem('infomaniak_api_key') || '');
  const [productId, setProductId] = useState(localStorage.getItem('infomaniak_product_id') || '');
  const [savePath, setSavePath] = useState(localStorage.getItem('infomaniak_save_path') || '');

  // Default prompts if none exist
  /* eslint-disable no-useless-escape */ // Escape quotes in prompts
  const defaultPrompts: PromptTemplate[] = [
    {
      id: '1',
      name: 'Meeting Protokoll (General)',
      content: `Rolle: Du bist ein hochprofessioneller, effizienter Protokollführer und persönlicher Assistent. Deine Aufgabe ist es, aus dem untenstehenden Roh-Transkript (oder den Notizen) ein strukturiertes, leicht lesbares und handlungsorientiertes Ergebnisprotokoll zu erstellen.

Anweisungen:
- Filterung: Ignoriere Smalltalk, Füllwörter, Begrüßungen und irrelevante Abschweifungen. Konzentriere dich auf Fakten, Entscheidungen und Aufgaben.
- Tonalität: Schreibe sachlich, objektiv und präzise (Business German).
- Klarheit: Formuliere vage Aussagen in klare Sätze um, ohne den Sinn zu verändern.
- Zuordnung: Ordne Aufgaben immer einer Person zu (wenn im Text genannt).

Gewünschte Struktur des Outputs:

# Meeting Protokoll: [Thema des Meetings]

Datum: [Datum einfügen, falls bekannt, sonst "N/A"]
Anwesende: [Liste der Namen]

## 1. Management Summary
Eine kurze Zusammenfassung der wichtigsten Punkte in 3-5 Sätzen. Worum ging es im Kern?

## 2. Wichtige Entscheidungen
[Entscheidung 1]
[Entscheidung 2]
(Liste hier nur Dinge auf, die explizit beschlossen wurden)

## 3. Offene Fragen / Diskussionspunkte
Kurze Stichpunkte zu Themen, die besprochen, aber noch nicht final geklärt wurden.

## 4. Action Items (To-Dos)
| Was ist zu tun? | Wer ist verantwortlich? | Bis wann? (falls genannt) |
| :--- | :--- | :--- |
| [Aufgabe 1] | [Name] | [Datum] |
| [Aufgabe 2] | [Name] | [Datum] |

## 5. Nächste Schritte / Nächstes Meeting
Kurze Info zum weiteren Vorgehen.`
    },
    {
      id: '2',
      name: '1:1 Gespräch / Jour Fixe',
      content: `Rolle: Du bist ein diskreter und empathischer Executive Assistant. Deine Aufgabe ist es, ein 1:1 Gespräch zwischen einem Mitarbeiter und seinem Vorgesetzten zusammenzufassen. Das Gespräch beinhaltet sowohl geschäftliche als auch private/persönliche Themen.

Wichtige Anweisungen:
- Kategorisierung: Trenne strikt zwischen "Persönlichem/Atmosphäre" und "Operativem Business".
- Tonalität bei Privatem: Fasse private Themen (Wochenende, Hobbys, Familie, Wohlbefinden) als fließenden Text zusammen. Sei hier warmherzig, aber diskret. Vermeide Stichpunkte, das wirkt bei Privatem zu mechanisch.
- Tonalität bei Business: Sei hier gewohnt präzise, faktenbasiert und nutze Bulletpoints.
- Sensibilität: Wenn über Feedback, Karriereentwicklung oder Kritik gesprochen wurde, fasse dies in einem separaten Abschnitt neutral und konstruktiv zusammen.

Gewünschte Struktur des Outputs:

# 1:1 Gesprächszusammenfassung

Datum: [Datum]
Teilnehmer: [Namen]

## 1. Persönlicher Check-in & Atmosphäre
[Hier bitte einen kurzen Fließtext schreiben: Wie geht es den Teilnehmern? Was wurde an privaten Updates geteilt (z.B. Urlaub, Familie, Hobbys)? Wie war die Grundstimmung des Gesprächs?]

## 2. Operative Themen (Business Updates)
Thema A: [Kurze Zusammenfassung]
Thema B: [Kurze Zusammenfassung]
(Führe hier die konkreten Arbeitsthemen auf)

## 3. Feedback & Entwicklung
[Hier notieren, falls über Karriereziele, Gehalt, Weiterbildung oder gegenseitiges Feedback gesprochen wurde. Falls nicht besprochen: "Keine Themen in diesem Meeting".]

## 4. Vereinbarungen & Action Items
| Wer? | Was ist zu tun / zu beachten? | Bis wann? |
| :--- | :--- | :--- |
| [Name] | [Aufgabe] | [Datum] |
| [Name] | [Aufgabe] | [Datum] |`
    },
    {
      id: '3',
      name: 'Kundenmeeting (Official)',
      content: `Rolle: Du bist ein professioneller Account Manager und Business Analyst. Erstelle ein Protokoll für ein Kundenmeeting. Deine Tonalität ist höflich, verbindlich und extrem präzise. Das Ergebnis soll so formuliert sein, dass es theoretisch direkt an den Kunden gesendet werden kann.

Wichtige Anweisungen:
- Fokus auf Vereinbarungen: Was wurde genau beschlossen? Wenn der Kunde eine Anforderung geändert hat, notiere das explizit.
- Verantwortlichkeiten trennen: Trenne bei den To-Dos strikt zwischen "Aufgaben für uns (Auftragnehmer)" und "Aufgaben für den Kunden" (z.B. Material liefern, Freigaben).
- Klarheit vor Länge: Vermeide interne Fachsprache, wenn möglich. Schreibe so, dass der Kunde es versteht.
- Diplomatie: Falls es Konflikte gab, formuliere diese lösungsorientiert und neutral (z.B. statt "Kunde hat sich beschwert" schreibe "Es wurde Feedback zu X besprochen, Lösungsweg ist Y").

Gewünschte Struktur des Outputs:

# Ergebnisprotokoll: [Projektname / Thema]

Datum: [Datum]
Teilnehmer: [Namen Kunden] & [Namen Intern]

## 1. Zusammenfassung (Executive Summary)
2-3 Sätze zum Ziel des Termins und dem aktuellen Status (z.B. "Wir haben den aktuellen Design-Sprint besprochen und die Anforderungen für Phase 2 finalisiert.")

## 2. Besprochene Punkte & Projektstatus
[Thema 1]: Kurze Zusammenfassung der Diskussion.
[Thema 2]: Kurze Zusammenfassung der Diskussion.

## 3. Wichtige Entscheidungen & Genehmigungen
(Dies ist der wichtigste Teil für die Absicherung!)
✅ Beschluss: [Was wurde final entschieden/freigegeben?]
🔄 Änderung: [Wurde der Projektumfang geändert? Neue Anforderungen?]

## 4. Action Items (Wer macht was?)

👉 Aufgaben für uns (Intern):
[ ] [Aufgabe] (bis [Datum])
[ ] [Aufgabe] (bis [Datum])

👉 Aufgaben für den Kunden (To-Dos / Lieferungen):
[ ] [Aufgabe, z.B. Zugangdaten senden, Design freigeben] (bis [Datum])

## 5. Nächster Termin / Timeline
Wann findet das nächste Meeting statt oder was ist der nächste Meilenstein?`
    }
  ];

  const [prompts, setPrompts] = useState<PromptTemplate[]>(() => {
    const saved = localStorage.getItem('infomaniak_prompts');
    return saved ? JSON.parse(saved) : defaultPrompts;
  });

  const handleSaveSettings = (newApiKey: string, newProductId: string, newPrompts: PromptTemplate[], newSavePath: string) => {
    setApiKey(newApiKey);
    setProductId(newProductId);
    setPrompts(newPrompts);
    setSavePath(newSavePath);
    localStorage.setItem('infomaniak_api_key', newApiKey);
    localStorage.setItem('infomaniak_product_id', newProductId);
    localStorage.setItem('infomaniak_prompts', JSON.stringify(newPrompts));
    localStorage.setItem('infomaniak_save_path', newSavePath);
    setView(lastTab);
  };

  // State for Recorder (lifted to persist across view changes)
  const [transcription, setTranscription] = useState('');
  const [summary, setSummary] = useState('');

  interface HistoryItem {
    id: string;
    date: string;
    transcription: string;
    summary: string;
  }

  const [history, setHistory] = useState<HistoryItem[]>(() => {
    const saved = localStorage.getItem('infomaniak_history');
    return saved ? JSON.parse(saved) : [];
  });

  const handleSaveToHistory = (t?: string, s?: string) => {
    const transToSave = t !== undefined ? t : transcription;
    const sumToSave = s !== undefined ? s : summary;

    if (!transToSave && !sumToSave) return;
    const newItem: HistoryItem = {
      id: Date.now().toString(),
      date: new Date().toLocaleString(),
      transcription: transToSave,
      summary: sumToSave
    };
    const newHistory = [newItem, ...history];
    setHistory(newHistory);
    localStorage.setItem('infomaniak_history', JSON.stringify(newHistory));
  };

  const handleDeleteHistory = (id: string) => {
    const newHistory = history.filter(item => item.id !== id);
    setHistory(newHistory);
    localStorage.setItem('infomaniak_history', JSON.stringify(newHistory));
  };

  const handleLoadHistory = (item: HistoryItem) => {
    setTranscription(item.transcription);
    setSummary(item.summary);
    setView('recorder'); // Ensure we go back to recorder to see it
  };

  // Logs State
  const [logs, setLogs] = useState<LogEntry[]>([]);

  useEffect(() => {
    const unlisten = listen<LogEntry>('log-event', (event) => {
      setLogs((prevLogs) => [...prevLogs, event.payload]);
    });

    return () => {
      unlisten.then(f => f());
    };
  }, []);

  return (
    <div className="min-h-screen bg-background text-foreground flex flex-col select-none overflow-hidden">
      {/* Top Navigation Bar */}
      {view !== 'settings' && (
        <div className="w-full flex justify-center items-center pt-4 pb-2 z-20 relative bg-background/95 backdrop-blur">
          <div className="absolute right-4 top-4">
            <button
              onClick={() => {
                setLastTab(view === 'logs' ? 'logs' : 'recorder');
                setView('settings');
              }}
              className="p-2 text-muted-foreground hover:text-foreground hover:bg-secondary rounded-full transition-colors"
            >
              <SettingsIcon size={20} />
            </button>
          </div>

          <Tabs
            currentTab={view as 'recorder' | 'logs' | 'transcription'}
            onTabChange={(t) => setView(t)}
          />
        </div>
      )}

      <div className="flex-1 flex flex-col h-full overflow-hidden relative">
        {view === 'recorder' && (
          <Recorder
            apiKey={apiKey}
            productId={productId}
            prompts={prompts}
            onOpenSettings={() => {
              setLastTab('recorder');
              setView('settings');
            }}
            transcription={transcription}
            setTranscription={setTranscription}
            summary={summary}
            setSummary={setSummary}
            history={history}
            onSaveToHistory={handleSaveToHistory}
            onDeleteHistory={handleDeleteHistory}
            onLoadHistory={handleLoadHistory}
            savePath={savePath}
            onRecordingComplete={() => setView('transcription')}
          />
        )}

        {view === 'transcription' && (
          <TranscriptionView transcription={transcription} summary={summary} />
        )}

        {view === 'logs' && (
          <LogViewer logs={logs} />
        )}

        {view === 'settings' && (
          <Settings
            onSave={handleSaveSettings}
            onClose={() => setView(lastTab)}
            apiKey={apiKey}
            productId={productId}
            prompts={prompts}
            savePath={savePath}
          />
        )}
      </div>
    </div>
  );
}

export default App;
