import { openUrl } from '@tauri-apps/plugin-opener';
import { ExternalLink, MessageCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';

const FRONTEND_URL = (import.meta.env.VITE_FRONTEND_URL ?? 'http://localhost:3002').replace(/\/$/, '');

export function ChatsScreen() {
  const familyUrl = `${FRONTEND_URL}/family`;

  return (
    <div className="safe-top flex h-screen flex-col p-4">
      <header className="mb-4 rounded-[28px] bg-white p-5 shadow-sm">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-sm text-[#667085]">Messenger</p>
            <h1 className="mt-1 text-2xl font-semibold">Чаты</h1>
            <p className="mt-2 text-sm text-[#667085]">Вкладка использует web UI семьи, чтобы дизайн и поведение совпадали с сайтом.</p>
          </div>
          <div className="flex h-12 w-12 items-center justify-center rounded-3xl bg-[#20212b] text-white">
            <MessageCircle className="h-6 w-6" />
          </div>
        </div>
      </header>

      <div className="min-h-0 flex-1 overflow-hidden rounded-[28px] bg-white shadow-sm">
        <iframe src={familyUrl} title="Lendry ID Family Messenger" className="h-full w-full border-0" />
      </div>

      <Button variant="secondary" className="mt-4 lg:hidden" onClick={() => void openUrl(familyUrl)}>
        <ExternalLink className="h-4 w-4" />
        Открыть мессенджер отдельно
      </Button>
    </div>
  );
}
