import { useState } from "react";
import ChatBox from "./components/ChatBox";
import ChatInput from "./components/ChatInput";
import FileUpload from "./components/FileUpload";
import { streamChat } from "./utils/streamChat";
import { Button, Box, Typography } from "@mui/material";
import "./index.css";
import "./App.css";

export default function App() {
  const [messages, setMessages] = useState([]);
  const [lastCode, setLastCode] = useState("");
  const [loading, setLoading] = useState(false);
  const [resetKey, setResetKey] = useState(0);
  const [fileUploaded, setFileUploaded] = useState(false);

  const detectLanguage = (filename) => {
  if (!filename || typeof filename !== "string") return "";
  const ext = filename.split('.').pop().toLowerCase();
  switch (ext) {
    case "js": return "javascript";
    case "py": return "python";
    case "java": return "java";
    case "cpp": return "cpp";
    case "ts": return "typescript";
    case "cs": return "csharp";
    default: return "";
  }
};
  
  const handleSend = async (msg) => {
    const newHistory = [...messages, { role: "user", content: msg }];
    setMessages(newHistory);
    setLoading(true);


    if (msg.includes("```")) setLastCode(msg);

    let fullContent = "";

    await streamChat({
      message: msg,
      history: messages,
      onChunk: (chunk) => {
        fullContent += chunk;
       setMessages([...newHistory, { role: "assistant", content: fullContent }]);
      },
      onDone: () => {
        setLoading(false); 
        setFileUploaded(false);
      },
    });
  };

  const handleExplain = () => {
    //if (lastCode) handleSend(`Explain this code:\n\n${lastCode}`);
    if (lastCode)handleSend("Explain this code");
  };

  const handleFixBug = () => {
   // if (lastCode) handleSend(`Fix the bug in this code and explain:\n\n${lastCode}`);
   if (lastCode) handleSend("Fix the bug in this code and explain");
  };

   const handleClear = () => {
    setMessages([]);
    setLastCode("");
    setFileUploaded(false);
    setResetKey((k) => k + 1);
  };

 return (
    <div className="app">
       
      
      <div className="chat-container">
        <div className="header-area">
              <Box display="flex" alignItems="center" gap={1} >
         <Typography variant="h4" component="h1" gutterBottom>
                🧑‍💻 DevMate
              </Typography>
        </Box>
              </div>
        <ChatBox messages={messages} loading={loading} />

        <Box className="buttons" 
        sx={{
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    mt: 1,
    ml: 1,
    flexWrap: "wrap",
    gap: 2,
  }}
        >
          <FileUpload
            reset={resetKey}
            onUpload={() => setFileUploaded(true)}
            onCodeParsed={(code, filename) => {
              const lang = detectLanguage(filename);
              const formatted = `\`\`\`${lang}\n${code}\n\`\`\``;
              setLastCode(formatted);
              setMessages((prev) => [
                ...prev,
                { role: "user", content: `Here's my code:\n\n${formatted}` },
              ]);
              setFileUploaded(true);
            }}
          />

          <Box sx={{ display: 'flex', gap: 1 ,mr:1}}>
            <Button
              variant="contained"
              onClick={handleExplain}
              disabled={!fileUploaded || loading}
            >
              Explain Code
            </Button>
            <Button
              variant="contained"
              onClick={handleFixBug}
              disabled={!fileUploaded || loading}
              color="warning"
            >
              Fix Bug
            </Button>
            <Button
              variant="outlined"
              onClick={handleClear}
              color="error"
            >
              Clear Chat
            </Button>
          </Box>
        </Box>

        <ChatInput onSend={handleSend} fileUploaded={fileUploaded} />
      </div>
    </div>
  );
}