// Skincare AI Scanner Web App - Full Project (React + TailwindCSS + Webcam + TensorFlow.js)

import React, { useState, useRef, useEffect } from "react";
import * as faceapi from "face-api.js";
import './App.css';

export default function App() {
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const [isScanning, setIsScanning] = useState(false);
  const [results, setResults] = useState(null);
  const [manualConcerns, setManualConcerns] = useState([]);

  const concernsList = [
    "Crows Feet",
    "Frown Lines",
    "Laugh Lines",
    "Dark Spots",
    "Red Spots",
    "Dry Skin",
    "Oily Skin",
  ];

  const productRecommendations = {
    "Crows Feet": { name: "Peptide Firming Eye Cream", benefit: "Reduces fine lines and firms skin." },
    "Frown Lines": { name: "Retinol Repair Serum", benefit: "Smooths deep wrinkles and boosts collagen." },
    "Laugh Lines": { name: "Hyaluronic Filler Gel", benefit: "Plumps skin and restores moisture." },
    "Dark Spots": { name: "Vitamin C Brightening Serum", benefit: "Fades pigmentation and evens tone." },
    "Red Spots": { name: "Calming Chamomile Cream", benefit: "Soothes redness and irritation." },
    "Dry Skin": { name: "Deep Hydration Cream", benefit: "Locks in moisture for all-day hydration." },
    "Oily Skin": { name: "Mattifying Gel Moisturizer", benefit: "Controls shine and balances oil." },
  };

  useEffect(() => {
    Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
      faceapi.nets.faceLandmark68Net.loadFromUri('/models')
    ]).then(() => console.log("Models loaded"));
  }, []);

  const handleStartScan = async () => {
    setIsScanning(true);
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });
      if (videoRef.current) {
        videoRef.current.srcObject = stream;
        videoRef.current.play();
      }

      setTimeout(async () => {
        const detections = await faceapi.detectSingleFace(videoRef.current, new faceapi.TinyFaceDetectorOptions()).withFaceLandmarks();
        const canvas = canvasRef.current;
        canvas.innerHTML = '';
        faceapi.matchDimensions(canvas, { width: 480, height: 360 });
        const resized = faceapi.resizeResults(detections, { width: 480, height: 360 });
        faceapi.draw.drawDetections(canvas, resized);
        faceapi.draw.drawFaceLandmarks(canvas, resized);

        const simulatedIssues = concernsList.sort(() => 0.5 - Math.random()).slice(0, 3);
        setResults(simulatedIssues);
        setIsScanning(false);
        stream.getTracks().forEach((track) => track.stop());
      }, 5000);
    } catch (err) {
      alert("Error accessing webcam.");
      setIsScanning(false);
    }
  };

  const toggleManualConcern = (concern) => {
    setManualConcerns((prev) =>
      prev.includes(concern) ? prev.filter((c) => c !== concern) : [...prev, concern]
    );
  };

  return (
    <div className="min-h-screen p-6 bg-white max-w-4xl mx-auto font-sans">
      <header className="flex justify-between items-center border-b pb-4 mb-6">
        <h1 className="text-3xl font-bold">MySkin AI</h1>
        <nav>
          <a href="#" className="text-blue-600 mx-2">Home</a>
          <a href="#" className="text-blue-600 mx-2">About</a>
          <a href="#" className="text-blue-600 mx-2">Contact</a>
        </nav>
      </header>

      <section className="mb-10">
        <h2 className="text-2xl font-semibold mb-3">? Manual Entry of Concerns</h2>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mb-4">
          {concernsList.map((concern) => (
            <label key={concern} className="flex items-center">
              <input
                type="checkbox"
                checked={manualConcerns.includes(concern)}
                onChange={() => toggleManualConcern(concern)}
                className="mr-2"
              />
              {concern}
            </label>
          ))}
        </div>
        {manualConcerns.length > 0 && (
          <div className="bg-gray-100 border rounded p-4">
            <h3 className="font-bold mb-2">Recommended Products</h3>
            {manualConcerns.map((c) => (
              <div key={c} className="mb-1">
                <strong>{productRecommendations[c].name}:</strong> {productRecommendations[c].benefit}
              </div>
            ))}
          </div>
        )}
      </section>

      <section className="mb-10">
        <h2 className="text-2xl font-semibold mb-3">? Real-Time Skin Scanner</h2>
        <button
          onClick={handleStartScan}
          disabled={isScanning}
          className="bg-blue-600 text-white px-4 py-2 rounded mb-4"
        >
          {isScanning ? "Scanning..." : "Start Live Skin Scan"}
        </button>
        <div className="relative">
          <video ref={videoRef} width="480" height="360" className="border mb-2" />
          <canvas ref={canvasRef} width="480" height="360" className="absolute top-0 left-0" />
        </div>

        {results && (
          <div className="bg-green-100 border rounded p-4">
            <h3 className="font-bold mb-2">Scan Results:</h3>
            {results.map((r) => (
              <div key={r} className="mb-1">
                <strong>{r}:</strong> {productRecommendations[r].name} — {productRecommendations[r].benefit}
              </div>
            ))}
          </div>
        )}
      </section>
    </div>
  );
}